Pages

▼
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
Monday, August 11, 2014

Best Lightweight and Responsive Front-End Frameworks

›
With fast processing websites in huge demand, developers have switched their preferences. From adding new functionality, to make their re...
Sunday, August 10, 2014

How to style the first occurrence of an element inside of another element?

›
Here's my problem. HTML <div id="content"> <h1>Headline</h1> <p>First paragraph that need...
Friday, April 4, 2014

CSS to align label and input

›
HTML Code Snippet: <fieldset id="o-bs-sum-buginfo"> <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix...
Monday, March 3, 2014

Tutorial Using @font-face

›
This was updated February 10th, 2011 Updated again January 2012 to be the cleanest and most compatible way to embed custom fonts. @font-fac...

Tutorial Useful CSS3 LESS Mixins

›
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; ...

Tutorial Two-Color Three-Dimensional Blocks and Text

›
We can use multiple text-shadow and box-shadow values to create a three-dimensional look to blocks or text, like this screenshot of David ...

Tutorial Turn Off Number Input Spinners

›
WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this: input[type=nu...

Tutorial Tucked Corners

›
<div class="corners"> Content </div> body { background: #e6e6e6; } .corners { background: #f6f6f6; ...

Tutorial Truncate String with Ellipsis

›
All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .truncate...

Tutorial Triangular List Bullets

›
ul { margin: 0.75em 0; padding: 0 1em; list-style: none; } li:before { content: ""; border-color: tran...

Tutorial Transparent Inside Border

›
<div class="inner-border"> Transparent Inside Border </div> .inner-border { background: #000; color: ...
Sunday, March 2, 2014

Tutorial Transparent Background Images

›
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the el...

Tutorial Top Shadow

›
Shadow along the top edge of the website, like this: body:before { content: ""; position: fixed; ...

Tutorial Text Rotation

›
.rotate { /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: ...

Tutorial Text Dripping Blood

›
.blood { color:silver; text-shadow: 4px 4px 1px #300000, 4px 6px 1px #400000, 4px 8px 1px #500000, ...

Tutorial Style Override Technique

›
p { font-size: 24px !important; } The !important rule at the end of a value will override any other style declarations of that attri...

Tutorial Style Links Depending on Destination

›
a[href^="http://"] { /* fully valid URL, likely external link */ } a[href="http://google.com"] { /...

Tutorial Sticky Footer

›
Works great if you can apply a fixed height to the footer. <div class="page-wrap"> Content! </div> ...

Tutorial Standard CSS Image Replacement

›
h1#logo { width: 200px; // width of image height: 100px; // height of image background: url(../path/to/image.jpg); text-ind...

Tutorial Stack of Paper

›
<div class="papers"></div> body { background: #666; } .papers { background-color: white; height: 350px...