1. Adding Rounded Corners: Rounded corners can be added to your CSS3-based elements, like borders and buttons.
<style type="text/css">
.round1 {
border:1px solid #c1c13a;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
.round2 {
border:1px solid #c1c13a;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0; /* future proofing */
-khtml-border-radius: 10px 10px 0 0; /* for old Konqueror browsers */
}
</style>
2. Change Styles of First/Last Elements: This is used to change the styles of the first and/or last elements of a container in CSS.
<style type="text/css">
p.first { margin-top: 0 !important; margin-left: 0 !important; }
p.last { margin-bottom: 0 !important; margin-right: 0 !important; }
/* or */
div#articles p:first-child { border:1px solid #c1c13a; }
div#articles p:last-child { border:1px solid #3ac13a; }
/* or */
div#articles > :first-child { text-align:left; }
div#articles > :last-child { text-align:right; }
</style>
<div id="articles">
<p class="first">1st article: lorem ipsum dolor sit amet...</p>
<p>2st article: lorem ipsum dolor sit amet...</p>
<p>3st article: lorem ipsum dolor sit amet...</p>
<p>4st article: lorem ipsum dolor sit amet...</p>
<p class="last">5st article: lorem ipsum dolor sit amet...</p>
</div>
3. CSS Box Shadow: Use this snippet to add shadows to tables, divs etc.
<style type="text/css">
.shadow {
-moz-box-shadow: 4px 5px 5px 1px #777;
-webkit-box-shadow: 4px 5px 5px 1px #777;
box-shadow: 4px 5px 5px 1px #777;
}
.shadowIE {
background-color:#f5f5f5; /* need for IE*/
-moz-box-shadow: 4px 5px 5px 1px #777;
-webkit-box-shadow: 4px 5px 5px 1px #777;
box-shadow: 4px 5px 5px 1px #777;
filter: progid:DXImageTransform.Microsoft.Blur
(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur
(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
.shadowIE .content {
position:relative;
background-color:#f5f5f5;
}
</style>
<div class="shadow">
This is a Box-shadowed element.
</div>
<div class="shadowIE">
<div class="content">
This is a Box-shadowed element.
</div>
</div>
4. Targeting Firefox With CSS: This snippet applies only to the Firefox extension for CSS.
<style type="text/css">
@-moz-document url-prefix(){
H5 { color:red; }
P { margin-left:20px; }
/* other special styles for FireFox here */
}
</style>
5. Background Gradient: With CSS3, you don't need to add images to the background of elements. You can directly add gradients.
<style>
.grad{
background: -webkit-gradient(linear, left top, left bottom, from(#84c8d7), to(#327fbd));
background: -moz-linear-gradient(top, #84c8d7, #327fbd);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr="#84c8d7", endColorstr="#327fbd");
}
</style>
<div class="grad">This is a DIV with gradient background.</div>
6. Alternating Table Color Rows: This is pretty self explanatory. If you have a table, you can use this to give it alternating row colours.
<style type="text/css">
/* technique 1 */
tbody tr:nth-child(odd){ background-color:#ccc; }
/* technique 2 */
TBODY TR.odd { background-color:#78a5d1; }
</style>
<table>
<tbody>
<tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
</table>
7. Reset Browser Default Styles: The same code can display different styles for different browsers. This is how to avoid the same.
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code
, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none; }
html
{ height:101%; } /* always show scrollbars */
body
{ font-size:62.5%; line-height:1; font-family:Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display:block; }
img
{ border:0; max-width:100%; }
a
{ text-decoration:none; }
a:hover
{ text-decoration:underline; }
ol, ul
{ list-style:none; }
blockquote, q
{ quotes:none; }
blockquote:before, blockquote:after, q:before, q:after
{ content:""; content:none; }
strong
{ font-weight:bold; }
input
{ outline:none; }
table
{ border-collapse:collapse; border-spacing:0; }
</style>
8. Center Website Content: Every one of your users will have different displays. So, you need to center your website's content so as to fit every display properly.
<style type="text/css">
/* Center your website horizontally */
.wrapper{
width:960px;
display:table;
margin:auto;
}
/* Center certain content vertically */
.container{
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="wrapper">
<div class="container">
<p>Content goes here</p>
</div>
</div>
9. Removing Arrows From <SELECT> Tag: In HTML, Select comes with drop down arrows. These can be removed using CSS.
<style type="text/css">
SELECT.no_arrows {
width:90px; padding-top:0px; margin:-5px 0 0 5px; border:0px;
background:transparent; -webkit-appearance:none;
text-indent:0.01px; text-overflow:""; color:#444;
}
SELECT.no_arrows:focus {
box-shadow:none;
}
SELECT.no_arrows::-ms-expand{
/* for IE 10+ */
display:none;
}
@-moz-document url-prefix(){
/* for FF */
SELECT.no_arrows {
width:auto; padding-top:2px; margin:0 0 0 5px;
-webkit-appearance: none; -moz-appearance: none;
}
}
</style>
10. Animated Tooltip with CSS new: This snippet uses the transform feature from CSS3 to create custom tool tips in pure CSS.
<style type="text/css">
.tooltip-container {
/* Forces tooltip to be relative to the element, not the page */
position:relative;
cursor:help;
}
.tooltip {
display:block;
position:absolute;
width:150px;
padding:5px 15px;
left:50%;
bottom:25px;
margin-left:-95px;
/* Tooltip Style */
color:#fff;
border:2px solid rgba(34,34,34,0.9);
background:rgba(51,51,51,0.9);
text-align:center;
border-radius:3px;
/* Tooltip Style */
opacity:0;
box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-0-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0);
/* Reset tooltip, to not use container styling */
font-size:14px;
font-weight:normal;
font-style:normal;
}
.tooltip:before, .tooltip:after{
content:"";
position:absolute;
bottom:-13px;
left:50%;
margin-left:-9px;
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid rgba(0,0,0,0.1);
}
.tooltip:after{
bottom:-12px;
margin-left:-10px;
border-top:10px solid rgba(34,34,34,0.9);
}
.tooltip-container:hover .tooltip, a:hover .tooltip {
/* Makes the Tooltip slightly transparent, Lets the barely see though it */
opacity:0.9;
/* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}
/* Custom Classes */
.tooltip-style1 {
color:#000;
border:2px solid #fff;
background:rgba(246,246,246,0.9);
font-style:italic;
}
.tooltip-style1:after{
border-top:10px solid #fff;
}
</style>
<i class="tooltip-container"><b>Lorem ipsum dolor sit amet</b><span class="tooltip">Hello! This is a first tooltip!</span></i>
<em class="tooltip-container"><b>Pellentesque id auctor sem</b><span class="tooltip tooltip-style1">This is a second tooltip!</span></em>
11. Prevent Long URLs From Breaking Out new: Long URLs often break out from the container, causing issues to users. This is how to avoid them from doing so.
<style type="text/css">
.break {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.ellipsis {
width: 250px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis; /* Required for IE8 */
-o-text-overflow: ellipsis; /* Required for Opera */
text-overflow: ellipsis;
}
</style>
Post a Comment