Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconbradleysays: More from bradleysays


More from deviantART



Details

Submitted on
October 19, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
7,095 (2 today)
Favourites
74 (who?)
Comments
26
×

CSS Did You Know? - October 19th, 2012

Journal Entry: Fri Oct 19, 2012, 9:41 AM
:iconbradleysays:
New: linear-gradient

Earlier today, deviantART announced in a Site Update that a new CSS3 function is available:



A guide on this function will be included in next week's edition of CSS Did You Know?, in the meantime, have fun playing around with it! :eager:



:iconujz:
How to: Custom Boxes

Through this tutorial you can teach yourself how to create a Custom Box. This could be used for anything from customizing your journal skin to adding more features to your website. In my view this is a quiet medium level tutorial and won't take you any more than 45 minutes to figure out and follow. Its would be more helpful if you have read the previous editions of this series in order to understand this better (links are at the bottom). But either ways I have re-introduced all the CSS styles in this tutorial.

What we shall create:


Your Title Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mi ac orci consequat varius. Morbi molestie gravida mauris eget vehicula. Nam volutpat sagittis ultrices. Fusce eget libero lacus, eget laoreet dui. Maecenas consequat risus odio, vitae iaculis ligula. Nunc dignissim viverra varius. Aliquam ligula risus, condimentum eu malesuada eu, porttitor a nulla. Nam nunc velit, condimentum vel auctor in, mattis sed orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut porta ullamcorper vehicula. Nunc convallis tincidunt libero, vel luctus ante ornare at. Proin vehicula hendrerit erat sit amet ultricies. Etiam suscipit ullamcorper tincidunt. Pellentesque ultrices mollis libero eget placerat.
Just a Fun button!


The CSS code used:


.box1 {
margin: 10px;
padding:10px;
background: #fff;
background-image: url(http://fc04.deviantart.net/fs70/f/2012/285/e/4/boxbc_by_cartondock-d5hk644.jpg);
background-repeat: repeat-x;
border: 1px solid #666;
color:#666;
box-shadow: 0px 1px 2px 0px #999999;
min-height: 150px;
border-radius: 3px;
}

.box1 .box1text {
color:#8dc63f ;
text-shadow: 0px 1px 0px #fff;
font-size:18px;
font-weight: bold;
margin-left:5px;
position:relative;
left:0px;
margin-top: -3px;
cursor: default;
}

.box1 .box1des {
color:#666 ;
text-shadow: 0px 1px 0px #fff;
margin: 20px;
margin-top:20px;
}

.box1 .box1button {
width: 100px;
color:#fff;
text-align:center;
padding:5px;
border-radius: 3px;
background: #00bff3;
cursor:default;
box-shadow: 0px 1px 1px 0px #e1e1e1;
}
.box1 .box1button:hover {
background:#f4a61d;
}
.box1 .box1button:active {
background:#ed145b;
}


Note that some of the CSS styles such as the box-shadow, text-shadow and border-radius are CSS3 properties and therefore are not compatible with most old browsers. This statistically means that about 15% of the internet users cannot see CSS3, however this doesn't mean your CSS won't completely work; the CSS3 styles would just be omitted.

If you are interested in using CSS3 properties without any compatiblity issues you can follow the solutions at www.netmagazine.com/features/t…, in order to get the same CSS3 effects with the standard 100% compatible CSS.

Suggested by Dediggefedde


The HTML code


<div class="box1"><div class="box1text"> YOUR TITLE HERE </div><div class="box1des"> YOUR TEXT HERE </div><div align="right"><div class="box1button"> BUTTON TEXT HERE </div></div>


What it all means:


The CSS used here in this tutorial is the same CSS I have introduced in my previous button tutorials, but I would be re-introducing them here as this is a completely new tutorial and so that you don't have to check back on the previous tutorials all the time.

The main new CSS I have introduced here are some combined CSS selectors (i.e. : .box1 .box1button), to understand them better you can read the previous tutorial about CSS selectors by miontre

:bulletblue: background: This states the background color and it has to be a HTML color code.

:bulletblue: color: This is the text color and it is also in the form of a HTML color code.

:bulletblue: padding: This is the space you want to leave between the content inside the CSS button and the edge. Has to be stated in Pixels (1px / 5px /...)

:bulletblue: border: This is the border, firstly here '1px' states the width of the border, 'solid' is the border style and can be changed to 'dotted' or 'dashed' to get the desired effect, '#000' is once again the HTML color code which states the color of the border.

:bulletblue: border-radius: This can be used to state how curved you want the edges of the border to be; if you set it to '0px' then you will have a perfect square and if you set it to '5px' you get curved edges. (can range from 0px - 90px)

:bulletblue: font-size: The font size in pixels.

:bulletblue: text-shadow: This is the text shadow. The first '1px' states how many pixels to the left the shadow should go. The second '1px' states how much to the bottom the shadow should go. The final color code states the color of the shadow.

:bulletblue: text-align: This is the text align (just as the name says): Can be set to either: Left/Right/Center

:bulletblue: max-height: & max-width: States the maximum height and width in pixels.

:bulletblue: cursor: This sets the cursor: can be either auto/default/pointer/text/help.

:bulletred: .button1:hover { } This is the hover effect, as in when the cursor is over the button this replaces the original CSS to the values in-between these tags. Such as here it changes the background color, border and text-shadow to a bluish color when the cursor is over the button.

:bulletred: .button1:active { } : As same as the hover effect, this code states the CSS which should be used when the button is pressed.

:bulletblue: background:url() : This piece of code it used to set an image as a background instead of a color. You have to place a full link to the image in-between the brackets.

:bulletblue: background-repeat: This is used to define in what direction the background-images is repeated. By default the image would repeat in both the x and y directions. However you can use the different values below to change this.

:bulletpink: The First "-2px" states how much to the right the shadow is, (negative values move it to the left)
:bulletpink: repeat : Repeats in both directions, both vertically and horizontally.
:bulletpink: repeat-x : Repeats only vertically.
:bulletpink: repeat-y : Repeats only horizontally.
:bulletpink: no-repeat : Does not repeat the background, therefore the background image is only placed once.

:bulletblue: box-shadow: -2px 2px 0px 0px #999;

:bulletpink: The First "-2px" states how much to the right the shadow is, (negative values move it to the left)
:bulletpink: The Second "2px" states how much to the bottom the shadow is, (negative values move it to the top)
:bulletpink: The third pixel value states how dispersed (/shaded/blurred) the shadow should be.
:bulletpink: The fourth pixel value states how thick the shadow should be, if set to 0px then the shadow would be the same size as the box.
:bulletpink: The last HTML color code states the color of the shadow.


:bulletblue: position: If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it is in the document.

:bulletpink: eg: 'top:1px;' and 'right:1px;'

You may find this CSS a bit lengthy, but its the nature of CSS and most of the time you have to use a lot of CSS in order to get a nice effect to your HTML. But remember its the same set of styles we repeat throughout the whole thing and therefore mastering each style (such as Box-shadow and Border) separately would indeed get you the best results from CSS. Hope you found this tutorial useful and if you run into any problems of any sort with the CSS feel free to ask here or send me ( UJz ) a note.

:iconbradleysays:
What would you like to know?

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




CSS Did You Know? is an article series that gives you tips and lessons on CSS. This edition includes information on a new CSS3 function recently made available, as well as tips on creating Custom Boxes using CSS.
Add a Comment:
 
:iconsonicviviana:
sonicviviana Featured By Owner Feb 15, 2013  Hobbyist Digital Artist
want you need help so true hug.
Reply
:iconsingingflames:
SingingFlames Featured By Owner Nov 13, 2012  Hobbyist Writer
Very cool! Thanks! :hug:
Reply
:icontifa22:
Tifa22 Featured By Owner Oct 20, 2012  Hobbyist Digital Artist
Thanks again! :D
Reply
:iconastrikos:
Astrikos Featured By Owner Oct 20, 2012   General Artist
Wow this is exciting! :la:
I don't code but this is awesome for people who do~
Reply
:iconujz:
UJz Featured By Owner Oct 21, 2012  Professional Digital Artist
You can always begin :D
Reply
:iconastrikos:
Astrikos Featured By Owner Oct 21, 2012   General Artist
:la: indeed!
Reply
:iconujz:
UJz Featured By Owner Oct 22, 2012  Professional Digital Artist
:la: :D
Reply
:iconastrikos:
Astrikos Featured By Owner Oct 22, 2012   General Artist
:eager:
Reply
:iconpiratelotus-stock:
PirateLotus-Stock Featured By Owner Oct 20, 2012
ILU
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 20, 2012  Hobbyist General Artist
woohoowoohoowoohoo! My brain just snapped. I get so excited about CSS upgrades. :D Okay, I'll go read the rest of the article becuase obviously, I got stuck on the first section there.... ;D
Reply
Add a Comment: