Ricardo-Diaz

//Depth & Gradient Input

 .depth {
  display: block;
  border: 1px solid silver;
  background: linear-gradient(#eee, #fff);
  transition: all 0.3s ease-out;
  padding: 5px;
  color: #555;
}

Ricardo-Diaz

Only Line Input

Ricardo-Diaz

.text-shadow {
   text-shadow: 2px 2px 4px #666;
}

Ricardo-Diaz

Adding an image-based border – border-image
You can create any kind of border you want for any object(s) on your website using this. Just supply your own border.png image, and the use the border-image property on a object to add that image-based border to it.

#border-image-style {
   border-width:15px;
   /* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
   -moz-border-image:url(border.png) 30 30 stretch ;
   -webkit-border-image:url(border.png) 30 30 stretch;
}

Ricardo-Diaz

Adding shadow to borders and images – box-shadow
Helps make your borders and images “pop” from the background more, giving a subtle 3D-like visual cue that it’s something separate, in the foreground, and the thing that visitors should be looking at.

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

Ricardo-Diaz

Adding rounded corners – border-radius
Self-explanatory. Add rounded corners to your CSS3-based elements, like a border or button. You can change the radius to increase or decrease the rounding of the corners. This is a blanket rounding of each corner; the next code snippet lets you individually round each of the 4 corners.

.round{
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px; /* future proofing */
   -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Ricardo-Diaz

Adding individual rounded corners – border-radius
You can also choose which individual 4 corners are rounded or have a blanket rounding of every corner.

#Bottom_Right {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px;
}
 

Ricardo-Diaz

Adding a gradient – linear-gradient
With CSS3, you no longer need a background image for gradients – you can use CSS to add a gradient to the background of something. Change the color hex values (“74b8d7″ and “437fbc”) to the color gradient you want.

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

Ricardo-Diaz

Adding print page breaks – page-break
This adds nice page breaks to articles and other long-form content on your website when your visitor decides to print it. Yeah, less and less people are printing on paper, but they’re using their web browser’s print function to create digital copies (PDFs) for future reading or archiving. This snippet makes it easier for them to do so and read afterwards.

.page-break{
   page-break-before:always;
}

Ricardo-Diaz

Quickly create pull-quotes
A pull-quote is exactly what it sounds like: a differently-formatted quote from an article that stands out and is meant to highlight a key statement or other text. This makes it easy for you to create pull-quotes, rather than having to format the text each time you want to include a pull-quote. Change the font and font color by replacing Georgia, "Times New Roman", Times, seri and the ff0000 accordingly.

.pull-quote {
   width: 200px;
   float: right;
   margin: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font: italic bold #ff0000 ;
}