Senin, 10 September 2012

Make Path Menu & Tooltip Pure use CSS3 update

Pada artikel sebelumnya Make Flash & Zooming Image Effect, jika sobat masuk ke web sumber pasti akan menemukan postingan dengan judul "Pie Menu (like Path menu ) using jquery and CSS3" Demonya
Ternyata trick tersebut sekarang sudah dapat dilakukan hanya menggunakan code CSS3! Bayangkan coba teknologi dunia CSS3 telah bisa merambah kemana-mana, bahkan yang diluar akal sekalipun :D Karena kode jadi dari trick Path menu in pure CSS3 lumayan banyak, bahasa coding tingkat expert, IQ gue jongkok (jadi rara ribet mau nerangin juga), terima jadi saja yak :D Bumbu dapat diambil di Github!
Sebagai bonus Koben mau mengupdate (others style) dalam membuat tooltip pure CSS3 yang pernah gw publish Tooltip CSS Without Span Writed Syntax ;) Sampai urusan buat tanda arah panah tooltip juga pake CSS :-"
DEMO
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum qui cu, nobis efficiendi eloquentiam in quo, scripta euripidis in est. At viris imperdiet vix. Justo assueverit reprehendunt has in, nostrud legendos appellantur eam ea.

Eos ex erat errem utinam, eos epicuri philosophia ut, ad eam ubique labore. Eos nibh laboramus ei, ei sumo fugit pro, ut dicat impetus partiendo vim. Ei magna velit eripuit duo, tamquam feugiat molestiae quo an, mea primis putant persequeris et. Nec te utinam adipiscing. His te illum posse. Ne mel detracto splendide referrentur. Ea mel everti concludaturque, ne nam alia reque. Vim apeirian iracundia ea, ea solum oratio oporteat duo, scaevola mandamus eu vel. Consul verear usu eu. Sit duis percipit ne. Per autem constituam id. In has melius virtute, sea probatus assentior id. Electram assueverit dissentiet eu pro. Ut sanctus dolorum vel. Ex cibo deserunt vim, utinam laudem vel id. Vim nostrum signiferumque ei, ad duo aliquip oporteat splendide. Mel verear legendos no.


a.tooltip {
font-weight: bold;
color: #3366CC;
}
a.tooltip:after{
font: 12px/1.4 Arial,Georgia,sans-serif;
content: attr(title);
display: none;
position: absolute;
padding: 5px 10px;
top: 0px;
margin: 0;
color: #fff;
background: #075698;
left: -20px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
/* triangle */
a.tooltip:before{
z-index: 11;
position: absolute;
content: "\00a0";
display: none;
width :0;
height: 0;
border-style: solid;
top: -1px;
left: 0px;
border-width: 15px 7px 15px 7px;
border-color: transparent transparent #075698;
}
a.tooltip:hover::before{
display: inline-block;
}
a.tooltip:hover{
z-index: 10;
position: relative;
}
a.tooltip:hover::after{
width: auto;
min-width: 75px;
display: inline-block;
margin: 25px 0 0 10px;
}
<a href="WTF HTTP://" class="tooltip" title="BLAH BLEH BLOH"></a>
Good luck :)
Source tooltip by: http://www.nitinh.com/2010/03/sexy-tooltip-using-css3/
Happy coding \m/

Tidak ada komentar:

Posting Komentar