Top Useful CSS Tricks and Code

August 25, 2015
Top Useful CSS Tricks and Code
Introduction:
This article explains collection of such CSS codes, that can give you features like turn an element sticky, give you dashed line underlining capabilities, flow the text of your page in a special shape, or achieve parallax effect. Some of them are widely supported while others are on their way for full support by all browsers.






1. Numbering headings and subheadings
Say you got a set of headings and subheadings in your document and you are numbering them manually or via a script. Instead, you can use CSS counters to do this.  And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.

HTML Code-

<div id="page">
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
</div>

CSS Code-

#page {
  counter-reset: heading;
}

h1:before {
  content: counter(heading)") ";
  counter-increment: heading;
}

h1 {
  counter-reset: subheading;
}

h2:before {
  content: counter(heading)"." counter(subheading)") ";
  counter-increment: subheading;
}
body{
  font-family: courier new;
}

2. Spice Up Plain Underlines
Sometimes we want to underline with a nice dotted or dashed line instead of a solid one. Since there is no option for that, we settle for border-bottom. But border-bottom is not a good solution if the text you are underlining wraps.

CSS3 specified not one but three new properties for text decoration text-decoration-color, text-decoration-line, and text-decoration-style which can be shorthanded into the good old text-decoration.

You can use those to style underline, overline, even make text blink, and more. As of April 2015 only Firefox supports this property, but you can enable "experimental web platform features" to use it on Chrome.

 HTML Code-

<a href="#">sample link</a>
<span class="sample">sample text</span>
<br/><br/>
<span class="through">to be cut text</span>
<span class="wavy">wavy line</span>

CSS Code-

a {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: orange;
}

.sample {
  text-decoration: underline overline dotted green;
}

.through {
  text-decoration: line-through;
  color: red;
}

3. Quoting A Quote
First of all, there is no need to bother with typing the correct curly quotes for short quotations because there is HTML for that: the <q> tag that indicates inline quotations.

The <q> tag also takes care of quoting the inner quotes with single quotes. So, where is the "there is ‘CSS’ for that" moment in this?

Lets say you don’t want the default double quotes or you have more than one level of nested quotes, you can define your quote preferences for the quote element with CSS by using the CSS2 quotes property.

HTML Code-

<p>
  <q>By your <q>powers</q> combined <q>I am <q>Captain Planet</q></q>
  </q>
</p>

CSS Code-

 p {
   quotes: "「 " " 」" '“' '”' "‘" "’"
 }

body{
  font-family: courier new;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

 4. Managing Unruly Tables
You may have come across a big table with varying content size per cell which refuses to remain within a width you have specified, no matter what you try. Tame that table with the table-layout property.

To be specific, the fix is in the table-layout: fixed; value. When you assign a fixed layout for the table, the table and the cell width are determined by the width of the table or of the first row of cells (which can be defined by the user) and not by the content. This is supported by all browsers.

HTML Code-

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, has ea timeam eligendi, in congue 
   oportere ocurreret duo. No fierent urbanitas vituperatoribus usu, 
   accusamus maiestatis te mea.Eam at delenit adipiscing, viris contentiones ex his.
    Alii eros ludus no nec. Ius cu fabellasdeseruisse interpretaris, tation 
     democritum has ea.</td>
    <td>elius verear vix</td>
    <td>Brute molestiae ea cum. Placerat intellegebat cum in, no tamquam 
   accusam mea, melius verear vix at. No elaboraret eloquentiam concludaturque vix.
    Accusamus theophrastus usu eu. An ius viris senserit.</td>
  </tr>
</table>

CSS Code-

table {
  width: 400px;
  table-layout: fixed;
  border-collapse: collapse;
  margin: auto;
}
td{
  border: 1px solid black;
}
body{
  font-family: courier new;
}

5. Make It Sticky
Sticky elements are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox supports it.

HTML Code-

<div id="extra"></div>
<br />
<div id="wrapper">
  <div id="sticky">
    sticky
  </div>
</div>

CSS Code-

#sticky {
  position: sticky;
  background: yellow;
  width: 100px;
  height: 100px;
  border: 1px solid red;  
  top: 70px;
  left: 10px;
}

#wrapper {
  border: 1px solid blue;
  width: 75%;
  margin: auto;
  height: 400px;
  background: url("your image URL");
}

#extra{
  background: green;
  width: 75%;
  margin: auto;
  height: 100px;
}

body {
  height: 1000px;
}

6. Get Your Text In Shape
Do you want the text on your page to nicely curve over some image you displayed beside it? You can try CSS Shapes. To implement CSS shapes, we can make use of three properties shape-outside, shape-margin and shape-image-threshold. As of April, 2015 CSS Shapes is supported by webkit browsers.

HTML Code- 


<div>
<img id="" src="http://1.bp.blogspot.com/-O03MStX2JJo/VZzfpnoqFMI/AAAAAAAAAis/
aC4SLZu74zY/s1600/11694915_1426459737682156_4238755009304555395_n1.png" alt="Rabbit"/>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum. 

</p>
</div>

CSS Code-

img {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle(50%);
}

 7. Mandatory Fields
If you got a form there is a high chance that some fields in it are required while others aren’t. You will need to let the users know which is which. The CSS for this is :required :optional pseudo classes. All modern browsers support them.

HTML Code-

<form>
  <label for="name">Name:&nbsp;&nbsp;&nbsp;&nbsp;</label>
  <input required id="name" type="text" />
  <br />
  <br />
  <label for="surname">Surname:</label>
  <input id="surname" type="text" />
</form>

CSS Code-

 :required {
   border: 1px solid pink;
 }
 
 :optional {
   border: 1px solid skyblue;
 }

8. Picky With Colors
If you don’t like a certain color, like blue, we can color the selected area with some other color and the ::selection pseudo element is the CSS for that. This is supported by all modern browsers.

HTML Code-

<p>Lorem ipsum dolor sit amet, has ea timeam eligendi, in congue oportere 
ocurreret duo. No fierent urbanitas vituperatoribus usu, accusamus maiestatis
 te mea. Eam at delenit adipiscing, viris contentiones ex his. Alii eros ludus
 no nec. Ius cu fabellas deseruisse interpretaris, tation democritum has ea. 
  Brute molestiae ea cum. Placerat intellegebat cum in, no tamquam accusam mea, 
melius verear vix at. No elaboraret eloquentiam concludaturque vix. Accusamus 
theophrastus usu eu. An ius viris senserit.     Brute molestiae ea cum. Placerat
 intellegebat cum in, no tamquam accusam mea, melius verear vix at. No elaboraret
 eloquentiam concludaturque vix. Accusamus theophrastus usu eu. An ius viris senserit.
</p>

CSS  Code-

p::selection {
  background: red;
  color: yellow;
}

p::-moz-selection {
  background: orange;
  color: yellow;
}

9. Did I Check It?
In a situation where a checkbox has been checked, it would be nice to have another indication apart form the tiny checkmark inside the default checkbox to denote that the item has been checked.

There is CSS for that which exploits the bond between the immediate siblings, two elements side by side. CSS has adjacent sibling selector denoted by the plus + sign,and we can use it to to target the label beside the checkbox. But what about targetting the checked checkbox first? There is the :checked pseudo class for that.

HTML Code-

<input id="mycheck" type="checkbox" />
<label for="mycheck">Check box label here</label>
<br />
<input id="mycheck" type="checkbox" checked/>
<label for="mycheck">Check box label here</label>
<br />
<input id="mycheck" type="checkbox" />
<label for="mycheck">Check box label here</label>

CSS Code-

input:checked + label{
  background: yellow;  
}

10. Like A Storybook
Then, wouldn’t it be nice if the first "O" in the "Once upon a time" looks pretty? We can make it look pretty, after all there is CSS for that. Here is where ::first-letter pseudo element comes to the rescue. It targets the first letter of the first line of the targeted element.

HTML Code-

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>


<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>


<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>

CSS Code-

p{
  font-family: "bookman old style"
}
p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 25px;
  font-weight: bold;
}

11. Would You Like To Know More?
An element may have class X or data Y or some other value to an attribute. If we ever need to display such an attribute value of an element near it, we can use the content:attr(X). It retrieves the value of attribute X of the element, then we can show it beside the element.

HTML Code-

<fieldset>
  <legend>Select a fruit</legend>
  <input type="radio" name="animal" value="Mango" />
  <br />
  <input type="radio" name="animal" value="Apple" />
  <br />
  <input type="radio" name="animal" value="Grapes" />
  <br />
</fieldset>

CSS Code-

input::after {
  content: "\00a0\00a0" attr(value);
}
body,input{
  font-family: courier new;
  font-weight: bold;
  font-size: 16pt;
}

 12. A Little Bit More To The Left
Centering elements for CSS beginners is quite a feat. Different elements require different set of CSS properties to center them. We will look into one example out of many that is available in the world wide web, so that you can remember again that there is CSS to center things.

HTML Code-

<div id="wrapper"> 
<div id="center"></div>
</div>

CSS Code-

#wrapper {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  height: 150px;
  width: 600px;
}

#center {
  margin: auto;
  background: red;
  height: 20px;
  width: 20px;
}

13. Disclose File Format Of Links
Ever seen a small image near a link indicating what that link is? A PDF? or a DOC? Yes, there is CSS to achieve that. The content:url() is what we will use to display the image behind the links.

HTML Code-

<a href="test.pdf">ebook to download</a>

CSS Code-

[href$=".pdf"]::after{
content: " " url("https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647716-pdf-24.png");
}

body{
  font-size: 24pt;
}

14. Trigger Parallax Effect
The parallax effect is an effect used to describe the seemingly slow movement of background relative to the foreground. This effect is popular in websites which implement parallax scrolling. There are different ways to implement it, the example below works in Firefox with background-attachment: fixed;.

HTML Code-

<div id="section">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
  </p>
</div>

CSS Code-

p {
  width: 100%;
  margin: auto;
  font-size: 50px;
  transform: scale(.5);
  font-family: courier new;
  font-weght: bold;
}

div {
  background-image: url("http://www.hdwallpapers.net/images/
  triangular-grads-wallpaper-for-1600x1200-72-701.jpg");
  background-attachment: fixed;
  transform: scale(1.25);  
}

body {
  height: 100%;
  overflow: scroll;
}

15. The Power Of CSS Animations
Probably not a huge "there is CSS for that" moment, because you all are most probably aware of CSS animations by now. But a little reminder is of no harm. There are many uses for CSS animations but here is one for a simple coloring exercise.

HTML Code-

<div>
</div>

CSS Code-

@keyframes blink {
  0% {
    background: violet;
  }
  14.3% {
    background: indigo;
  }
  28.6% {
    background: blue;
  }
  42.9% {
    background: green;
  }
  57.2% {
    background: yellow;
  }
  71.5% {
    background: orange;
  }
  85.8% {
    background: red;
  }
  100% {
    background: violet;
  }
}

@-webkit-keyframes blink {
  0% {
    background: violet;
  }
  14.3% {
    background: indigo;
  }
  28.6% {
    background: blue;
  }
  42.9% {
    background: green;
  }
  57.2% {
    background: yellow;
  }
  71.5% {
    background: orange;
  }
  85.8% {
    background: red;
  }
  100% {
    background: violet;
  }
}

div {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  animation: blink 20s linear infinite;
  -webkit-animation: blink 20s linear infinite;
}

, ,
By:
Ashwani
Ashwani

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)