Drake1 on DeviantArthttp://creativecommons.org/licenses/by-nc-nd/3.0/https://www.deviantart.com/drake1/art/Transparent-342716220Drake1

Deviation Actions

Drake1's avatar

Transparent

By
Published:
6.4K Views

Description

:iconfreeperm1::iconfreeperm2::iconfreeperm3::iconfreeperm4::iconfreeperm5::iconfreeperm6:
If the font doesn't show properly, search for it yourself (it's named Raleway), or download it from here!
Helloooooo :iconashiamplz:!
`ginkgografix organized this C-Project, which combines the CSS Advent Calendar with the Task Calendar project. So, each day either a skin is released or a task is given, and since now it's December 14 (at least in most of the countries lol), it's my turn to upload my skin!

I named it Transparent because... It's transparent. xD
This skin can be considered as a remake of my First Skin, but I decided not to name it "First Skin 2.0" or something like that. :B
I hope you like it! Live view here!:la:

How to use headings:

Put the following code:
<h2>Text here</h2>

How to use blockquotes:

Put the following code:
<blockquote>Text here</blockquote>

And to add the author of the quote, just wrap it with a span tag, like this:
<blockquote>Text here <span>Author of the quote</span></blockquote>

:D

How to use lists:

Put the following code:
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>

Put as many list items you want. And to put an Ordered List, just replace "ul" with "ol"

You can use two columns if you want,

just put the following code:
<div class="halfCol">Text here</div><div class="halfCol">Text here</div>
<div class="clear"></div>

To use three columns, put:

<div class="thirdCol">Text here</div><div class="thirdCol">Text here</div><div class="thirdCol">Text here</div>
<div class="clear"></div>

And to put four columns:

<div class="fourthCol">Text here</div><div class="fourthCol">Text here</div><div class="fourthCol">Text here</div><div class="fourthCol">Text here</div>
<div class="clear"></div>

Please: do not leave any space or linebreak between </div> and <div class="halfCol/thirdCol/fourthCol">
Also, do not remove the "clear" part.


To center something:

Put this code:
<div class="center">Text, thumbnails, whatever you want here</div>

Other codes you can use:

To put links: <a href="LINK HERE">List Item</a>
To put an image: <img src="IMAGE URL HERE" alt="" />
To put a separator: <hr />



So, that's all folks! I hope you like it, and let me know if there's any trouble using it, or if you need help! :aww:
Comments27
Join the community to add your comment. Already a deviant? Log In
Zichee's avatar
:star::star::star::star::star-half: Overall
:star::star::star::star::star-half: Vision
:star::star::star::star::star: Originality
:star::star::star::star::star-half: Technique
:star::star::star::star::star: Impact

Very nice and elegant layout. Every time I look at it, it made me think of glass. Honestly I find that the transparent-looking box looks is well done, and it looks very glossy and smooth.

On with the text. I must say that the text you used are definitely readable. Perfect sizes for the heading, title and the general text. The text definitely fit the layout because I think of a clean, smooth and shiny look. However, maybe add a bold text for the title so it shouts in a loud way.

The background. I love how you blend from red to blue, and including the circles from blurry to sharp, which really adds contrast.

The boarders for the pictures. Not much to say, but it looks very well done. One thing I'd like to add for the boarders is to make the drop shadow a little darker so it doesn't look flat.

Overall, good work! I hope that summons up everything I need to say here. <img src="e.deviantart.net/emoticons/s/s…" width="15" height="15" alt="=)" data-embed-type="emoticon" data-embed-id="390" title="=) (Smile)"/>