CSS Reference

It is crucial to have a CSS reference while designing web pages and as such, I have provided a bunch of CSS elements that'll be helpful to you.

Text and Fonts

font
font-family
font-size
font-weight
font-style
font-variant
line-height
letter-spacing
word-spacing
text-align
text-decoration
text-indent
text-transform
vertical-align
white-space

Colours and Backgrounds

color
background-color
background
background-image
background-repeat
background-position
background-attachment

The Box Model - dimensions, padding, margin and borders

padding, padding-top, padding-right, padding-bottom, padding-left
border, border-top, border-right, border-bottom, border-left
border-style, border-top-style, border-right-style, border-bottom-style, border-left-style
border-color, border-top-color, border-right-color, border-bottom-color, border-left-color
border-width, border-top-width, border-right-width, border-bottom-width, border-left-width
outline
outline-style
outline-color
outline-width
margin, margin-top, margin-right, margin-bottom, margin-left
width
height
min-width
max-width
min-height
max-height

Positioning and Display

position
top
right
bottom
left
clip
overflow
z-index
float
clear
display
visibility

Lists

list-style
list-style-type
list-style-image
list-style-position

Tables

table-layout
border-collapse
border-spacing
empty-cells
caption-side

Generated Content

content
counter-increment
counter-reset
quotes

Paged Media

page-break-before
page-break-after
page-break-inside
orphans
widows

Others

cursor
direction
unicode-bidi

Posted By Unknown1:40:00 pm

0

Continue Reading

CSS3 Social Network Buttons

In this tutorial, I'll show you how to create CSS3 social network subscribe buttons. 

Follow these steps precisely:

1. Go to your layout in Blogger dashboard.
2. Click on add new gadget
3. Locate add HTML/JavaScript code in the pop-up window.
4. Copy, Paste and save the code below into the editor that appears and save.

<style>
/* BthemesandTricks */
.socialicons{
list-style-type:none;
margin:0;
padding:0;
background: #f0f8ff;
width: 350px;
}
.socialicons li{
display:inline;
width: 60px;
height:60px;
}
.socialicons li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.socialicons li img:hover{
-moz-transform:scale(0.8); /*scale up image 1.8x*/
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
}</style>

<br />
<center>
<br />
<ul class="socialicons">
<li><a href="http://www.plus.google.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Google-Plus-icon.png" title="+1 us on Google Plus" /></a></li>

<li><a href="http://www.facebook.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Facebook-icon.png" title="Like us on Facebook" /></a></li>

<li><a href="http://www.pinterest.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Pinterest-icon.png" title="Follow on Pinterest" /></a></li>

<li><a href="http://www.twitter/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Twitter-2-icon.png" title="Follow on Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/RSS-icon.png" title="Subscribe to our feed" /></a></li>

<li><a href="http://linkedin.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Linkedin-icon.png" title="Connect with us on Linkedin" /></a>
</ul>
5. Change the "#" sign to your username.
6. Enjoy! 

Demo

• 
• 
• 
• 
• 
• 

Posted By Unknown2:02:00 pm

0

Continue Reading

How to create a stylish header using CSS3

CSS can be used for a lot of styling purposes today. In fact, CSS can now be  used in place of such software as photoshop and corel draw when manipulated correctly. In this article, I'll show you how to create a fancy header using CSS3.
During the days of CSS2.1, you could only use the standard font types such as serif, sans-serif, cursive, fantasy, et cetera. And the only way any of such fonts would display on the users browser is if the font is installed on the computer, thus if you applied, say Georgia fonts to your CSS rule and perhaps that font isn't installed on your user's PC, the browser uses the default serif font thus you lose all your styles and impression you would have made.
CSS3 introduced a new element which is the @font-face. With it, you can apply web fonts to your CSS rules, that way, the font displays on your user's PC irrespective of whether the font is installed or not. Great right? sure, it is. Not just that, you can include some fancy styles to the font.
Get ready to learn some cool ways to create headers using CSS3.
You can add a cool header to your website using the code below.
<style rel="stylesheet">
/* @font-face tutorials by BthemesandTricks */
@font-face {
font-family: 'Crafty Girls';
font-style: normal;
font-weight: 400;
src: local('Crafty Girls'), local('CraftyGirls'), url(http://themes.googleusercontent.com/static/fonts/craftygirls/v2/0Sv8UWFFdhQmesHL32H8o3hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
header {
font-size: 50px;
padding: 15px;
height: 100px;
text-align: left;
text-shadow: -4px 4px 3px #999, 1px -1px 2px #000;
margin-top: 0;
margin-bottom: 0;
}
</style>
<header>
<h1>Stylish Header</h1>
</header>

Stylish Header

Posted By Unknown3:15:00 am

0

Continue Reading

How to Add a Subscription Box

Hello, today, I'll be sharing with you on how to add a subscription box to your website or blog. To add one follow the steps outlined below:

• Click on the Add a Gadget link in your Blogger layout.
• Select HTML & JavaScript Code from the pop-up window
• Copy the code below:

<style>

.tbisubscribe {

border: 1px solid #D3D3D3;

padding: 8px;

width: 300px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubscribe:hover {

-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

}

.tbimailbox {

border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;

-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

color: #666;

font: 14px "trebuchet ms", sans-serif;

padding: 7px 15px;

width: 160px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbimailbox:hover {

-webkit-box-shadow: none;

box-shadow: none;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubmit {

font: bold 12px Tahoma, Geneva, sans-serif;

font-style: normal;

color: #ffffff;

background: #ff5714;

border: 0px solid #ffffff;

text-shadow: 0px -1px 1px #222222;

box-shadow: 2px 2px 5px #000000;

-moz-box-shadow: 2px 2px 5px #000000;

-webkit-box-shadow: 2px 2px 5px #000000;

border-radius: 10px 10px 10px 10px;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

padding: 8px 15px;

cursor: pointer;

margin: 0 auto;

}

.tbisubmit:active {

cursor: pointer;

position: relative;

top: 2px;

}

.tbisubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

</style>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

<div class='tbisubscribe'>

<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>

<div style='margin: 10px 0 0 6px;'>

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'

method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=labstrike', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'

style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='labstrike' />

<input name='loc' type='hidden' value='en_US' />

<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'

onfocus='if (this.value == "Enter your email...") {this.value = ""}'

type='text' value='Enter your email...' />

<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>

</form>

</div>

<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>

<div style='margin: -32px 0 0 120px;'>

<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxebQd-JwSpti8wlnxFIOnB_f9kesZ5wD7i8zhe67b1i_YcpBH4TlLVb9nC2yWi3eEP00kbpckp55A7UksaILvg5S80S8YAmzJmm6QWpaO5I8gYg4FqcGAPIVu0Wd-4lQdUWwPdUIhr8/s1600/facebook500.png' alt='facebook'/></a>

<a href='TWITTER URL' rel='nofollow' target='_blank'

title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DB4tY3155PXb-hn2CmHrmbG1xdnAqAZDV3C8xsWKYqhzJxbZoRNsExQoA8sURgm1Cw8DuSjjZCdGPaum6UA34QJtYzxFUHUfzqvoTdfduyRWovuZYrq9Hqet2T07i83Ja1y5jXxjxcE/s1600/twitter.png' alt='twitter'/></a>

<a href='GOOGLE+ URL' rel='nofollow' target='_blank'

title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNbP8LQfX-ypM4NR4rddYzpVDhILEHdCSYcIM63dBBC9ELj5XtyceI-wTjQrpMe1UHKZNzP1brf1RLBBkOcLbrUHdP5EEgGCrTR76kft9e6-KIPbtdGf2ssoiSWxSZTGfQgIP1jchp54/s1600/googleplus-revised.png' alt='gplus'/></a>

<a href='PINTEREST URL' rel='nofollow' target='_blank'

title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvgDu7gr0d6oyK3kxY6MpTnihF-crU-kHZxJEzJMB2pa18b_Z37CRROU_FNzyMHsWAfSSA6Ir-x0fq1J0ua9cIBv9NjZlIGXJlKMfjg0wTah9Fol16Fq7mKyRyefWHuxDA7bNN5HF4g0E/s1600/pinterest.png' alt='pinterest'/></a>

<a href='RSS URL' rel='nofollow' target='_blank'

title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_FsvpxCpynj0yODllevzSz69gIraRlp2LiKe_cTLVTcCaDQYwc0kYfniG-Mi9TmrXKnjZrpD4ngTMjVPUDvT65bI1sdZZglFCphRdhuQVT7NQNiecElaa22IN1I-a1OBHkL9oOsnBZ0/s1600/rss.png' alt='rss'/></a>

</div>

</div>

• Paste it into a text editor such as Notepad

• Edit the Facebook, Twitter, Google+, Pinterest, and RSS url respectively to your desired url.

• Copy the code from the text editor and paste it into the HTM & JavaScript column 

• Save the changes

• Open your blog and view the results

  
 

Posted By Unknown10:47:00 pm

0

Continue Reading

How to Create the Microsoft Logo using CSS

In this article, I"ll show you a simple way of creating the Microsoft Logo above using only pure CSS. You won't use Photoshop or Corel Draw just CSS. Isn't that amazing?
Copy the following code into your text editor and save it as logo.html
Open up the new document in your web browser and presto, you're good to go.

 <logo>Microsoft</logo>

<style>
logo {
    font: bold 60px "Segoe UI";
    color: #747273;
    line-height: 1.5em;
    padding-left: 1.7em;
}

logo:before {
    content: '\2006';
    position: absolute;
    height: 00.095em;
    left: 0;
    box-shadow: 0.35em 0.35em 0 0.25em #f8510c,
                1.05em 0.35em 0 0.25em #7eba00,
                0.35em 0.97em 0 0.25em #00a3f4,
                1.05em 0.97em 0 0.25em #ffba00;    
}
</style>

Posted By Unknown2:01:00 pm

2

Continue Reading