Make CSS Tab Content is like Tab View| New

Blog Tidak ada komentar

Hello guys,ketemu lagi dengan kita.kali ini kita akan ngeSHARE trik blog nih,pengen buat text area ente lebih unik seperti screenshot dibawah ini?.

Yupz,carana' sangat mudah,tinggal ente copas aja coding dibawah ini.taruh di html/javascript dan trada!,jadilah "Tab Content ".tapi sebelumnya ente edit ya tulisan bahasa asingnya :D (bukan codingnya)

<div class="post-body" id="PostContent">
<div class="slide5">
<div class="slid3">
<input id="slide1" name="slideshow" type="radio" /><label class="tvcss" for="slide1">CSS</label><br />
<div class="cont4nt">
<h2>
CSS</h2>
Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne, razumju belaruszem des bu. Uzx zavod tomatis televidenie do. Znat dajte dev no, ku hce gladju sportju vipolnil. Li mesto esperantio gaz, ti novju takak gramatik dva, des da tugde dumajm hrebet. Tot om vnov dost. Ti dev idijte sidili. Tri mama dikju polnite mi. Politju delanie lubovijm tut ne, bi grod cxernju din, sos cxai hcejm dolaris no. Tof bi glodju premnog slovenzem.</div>
</div>
<div class="slid3">
<input id="slide2" name="slideshow" type="radio" /><label class="tvcss" for="slide2">HTML</label><br />
<div class="cont4nt">
<h2>
HTML</h2>
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.</div>
</div>
<div class="slid3">
<input id="slide3" name="slideshow" type="radio" /><label class="tvcss" for="slide3">JQUERY</label><br />
<div class="cont4nt">
<h2>
JQUERY</h2>
Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete americas le, libro excellente pan de, latente philologos conferentias pan se. Infra esseva uso ma.</div>
</div>
<div class="slid3">
<input id="slide4" name="slideshow" type="radio" /><label class="tvcss" for="slide4">JAVA SCRIPT</label><br />
<div class="cont4nt">
<h2>
JAVA SCRIPT</h2>
Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass Duerf heemlech net. Zum ké Noper éiweg, gutt rout d'Musek no rëm, d'Natur d'Liewen Gesträich vu sin.</div>
</div>
</div>
<style>.slide5{position:relative;width:100%;height:250px;overflow:hidden;border-radius:5px;background:#999 url(http://4.bp.blogspot.com/-y8OfYWkTnDw/UUpmZMneHBI/AAAAAAAABls/jERYjuSG0CE/s000/pattern.png);border:5px solid #333}.slid3{position:absolute;width:100%;height:100%;left:0;top:0}.cont4nt{position:absolute;width:100%;top:0;color:#fff;opacity:0;padding:0 10px;text-shadow:1px 2px 3px #000;transform:translateY(-100%);transition:transform .5s ease-out,opacity 1s ease-out}input[type=radio]{display:none}.tvcss{display:block;position:absolute;bottom:0;line-height:3em;width:25%;text-align:center;cursor:pointer;font-size:.8em;z-index:50;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25);font-weight:bold;background:#111}.slid3:nth-child(2) .tvcss{margin-left:25%}.slid3:nth-child(3) .tvcss{margin-left:50%}.slid3:nth-child(4) .tvcss{margin-left:75%}input[type=radio]:checked ~ .cont4nt{transform:translateX(0);opacity:1}input[type=radio]:checked + .tvcss{background:#fff;color:#111;text-shadow:none}.cont4nt h2{color:red}</style><span id="Tab_BoxCjt"><a href="http://cyberjellyfishteam.blogspot.com/" title="Make CSS Tab Content is like Tab View">Make css tab content is like tab view</a>.</span></div>

See Demo :)

Trims Just Info
*Dighca Xevious

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )

Make CSS Tab Content is like Tab View| New

Tidak ada komentar :

Labels

Popular Posts

Info

Iklan/ADS