CSS Before After image with center text

todiadiyatmo 01 Okt 2013 < 1 Menit 0

Advertisements

Advertisements

css-before-after-image-with-center-text

A cross-browser boilerplate for centering text with before after image.

The sample result is :

687474703a2f2f746f6e6a6f6f2e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031332f31302f49452d382d436f6d70617469626c652e706e67

You can also view it live here :

Live Sample , Click Here

Tested on :

  1. IE 8 – 10 (Yeaah IE compatible :D) ~ IE < 8 is not supporting before after css
  2. Mozilla Firefox
  3. Chrome
  4. Opera

 

Advertisements

How to use it :

  1. Download the package, open index.php on sample folder
  2. Tweak your CSS According your need. The syntax is straightforward and i also have put some notes on it
  3. Standard usage :
    <div class='before-after-center'> <span class='wrapper'> <h4>Beautifull Center Heading with before after ornament</h4> </span> </div> 

Question and support

Please use the github issues forum : https://github.com/todiadiyatmo/css-before-after-image-with-center-text/issues

Advertisements

Source code download

Last Updated on Mei 25, 2014 by todiadiyatmo

Bagikan ke:
Diarsipkan di bawah:
css
todiadiyatmo
Ditulis oleh

todiadiyatmo

engineer | keyboard warrior | founder @tonjoostudio

Advertisements

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.