Юрзуф-Тур

все виды экскурсий по Крыму

Typography

  • Печать
Подробности
Категория: Uncategorised
Опубликовано 28.05.2012 09:00
Автор: Super User
Просмотров: 3930

The styles below are used by appending a class to a tag.

This is an image with the class "border_img"
Enter class name to img tag <img class="border_img" />

border


Default list example

  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum

This is a list with the class "linked"
Enter class name to ul tag <ul class="linked" />

 


This is a list with the class "special"
Enter class name to ul tag <ul class="special" />

 

  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
  • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
    • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum
      • Duis tincidunt nunc sit amet ipsum

This is a read more link with the class "readon"
Enter class name to a tag <a class="readon" />

Read more

this is a paragraph with the class "blue"
<p class="blue" > Text goes here</p>

this is a paragraph with the class "green"
<p class="green" > Text goes here</p>

this is a paragraph with the class "red"
<p class="red" > Text goes here</p>

this is a paragraph with the class "yellow"
<p class="yellow" > Text goes here</p>

this is a paragraph with the class "grey"
<p class="grey" > Text goes here</p>


this is a paragraph with the class "bluefill"
<p class="bluefill" > Text goes here</p>

this is a paragraph with the class "greenfill"
<p class="greenfill" > Text goes here</p>

this is a paragraph with the class "redfill"
<p class="redfill" > Text goes here</p>

this is a paragraph with the class "yellowfill"
<p class="yellowfill" > Text goes here</p>

this is a paragraph with the class "greyfill"
<p class="greyfill" > Text goes here</p>

this is a paragraph with the class "quote"
<p class="quote" > Text goes here</p>


This is Heading One (h1)

This is Heading Two (h2)

This is Heading Three (h3)

This is Heading Four (h4)

This is Heading Five (h5)
This is Heading Six (h6)

 

This code allows you to display an animated button created with css3:
Note: If you would like to add your own text into the button, just modify the code below or edit an existing button in the custom module of the demo template.

<p><a class="a-button" href="#"> <span>Check flight times</span> <img src="/images/modules/clock.png border="0" alt="Image" /> </a></p>

Check flight timesImage

Available color suffixes for the button:

1) this is an anchor with class "a-button yellow"

Check flight timesImage

2) this is an anchor with class "a-button orange"

Check flight timesImage

3) this is an anchor with class "a-button green"

Check flight timesImage

4) this is an anchor with class "a-button blue"

Check flight timesImage

Available images for the button (just change the path to the image):

1) this is a button with image "clock.png"

Check flight timesImage

2) this is a button with image "bell.png"

Check flight timesImage

3) this is a button with image "plane.png"

Check flight timesImage

4) this is a button with image "signs.png"

Check flight timesImage

5) this is a button with image "entry.png"

Check flight timesImage


For more details on how to use and modify the button code and styles, please visit this site:
http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/