Βρίσκεστε εδώ: » Αρχική » Blog » CSS

multi hover CSS

Όλα ξεκίνησαν βλέποντας την εικόνα στο www.filterforge.com και σκέφτηκα ότι θα ήταν όμορφο ένα τέτοιο εφέ κατασκευασμένο με CSS.

Δεν είχα το κατάλληλο glass brick έτσι απευθύνθηκα στο freestuff και στα παιδιά που ασχολούνται με 3D να μου φτιάξουν ένα brick, μου έφτιαξε ένα πρόχειρο ο 3dnoob (τον οποίο τον ευχαριστώ ιδιαίτερα)
και ξεκίνησα την κατασκευή μετά από μερικές βδομάδες που βρήκα ελεύθερο χρόνο, το αποτέλεσμα είναι σαν την εικόνα που βλέπετε.

Multi Hover CSS

Το συγκεκριμένο CSS το δοκίμασα τοπικά και φαίνεται να λειτουργεί σε ΙΕ6 ΙΕ7 firefox2 opera9.21 flock 0.7.14 safari, δεν έχω καμία ιδέα πως εμφανίζεται σε linux και ελπίζω να το αναφέρει αν κάποιος το δει με κάποιο άλλο browser.

Μπορείτε να δείτε εδώ το multi-hover CSS και να κατεβάσετε το CSS, έχει άδεια creative commons
(Μόνο HTML και CSS οι εικόνες δεν συμπεριλαμβάνονται σε αυτή την άδεια)
και είστε ελεύθεροι να κάνετε δημιουργικές εργασίες κάτω από την ίδια άδεια.
Δυστυχώς δεν είμαι καλός στο να κάνω tutorial και έτσι θα πρέπει να βρείτε μόνοι σας τον τρόπο με το οποίο δουλεύει το CSS.

Ελπίζω να σας αρέσει γιατί εγώ ξετρελάθηκα, και λέω να ετοιμάζω σιγά σιγά με αυτό το CSS μια δυναμική photo gallery.

PS: Έβαλα lightbox μόνο και μόνο γιατί εμφανίζονται καλύτερα οι εικόνες.

Στείλε το άρθρο στο
Στείλε το άρθρο στο blinkbits Στείλε το άρθρο στο blogmarks Στείλε το άρθρο στο del.icio.us Στείλε το άρθρο στο digg Στείλε το άρθρο στο fark Στείλε το άρθρο στο furl Στείλε το άρθρο στο google Στείλε το άρθρο στο ma.gnolia Στείλε το άρθρο στο myweb Στείλε το άρθρο στο netscape Στείλε το άρθρο στο netvouz Στείλε το άρθρο στο newsvine Στείλε το άρθρο στο rawsugar Στείλε το άρθρο στο reddit Στείλε το άρθρο στο scuttle Στείλε το άρθρο στο shadows Στείλε το άρθρο στο simpy Στείλε το άρθρο στο slashdot Στείλε το άρθρο στο spurl Στείλε το άρθρο στο technorati Στείλε το άρθρο στο wists

Σχόλια (2) 475 Views October 8, 2007 (4:51PM)

fucking ie

Όταν ξεκίνησα με την ιδέα να δημιουργήσω αυτό το site είχα στο μυαλό μου συγκεκριμένα πράγματα, ένα από αυτά ήταν η χρήση αποκλειστικά PNG εικόνων.
Το σκέφτηκα από εδώ το έψαξα από εκεί, και μιας και στις προηγούμενες ιστοσελίδες τα πήγαινα καλά με PNG εικόνες ξεκίνησα να το φτιάχνω.

Η ιδέα ήταν απλή μέσα στην html υπάρχει το CSS που διαβάζουν όλοι οι normal browsers και δείχνει την εικόνα με την class .logoA μπλοκάροντας την class .logoB.

Στείλε το άρθρο στο
Στείλε το άρθρο στο blinkbits Στείλε το άρθρο στο blogmarks Στείλε το άρθρο στο del.icio.us Στείλε το άρθρο στο digg Στείλε το άρθρο στο fark Στείλε το άρθρο στο furl Στείλε το άρθρο στο google Στείλε το άρθρο στο ma.gnolia Στείλε το άρθρο στο myweb Στείλε το άρθρο στο netscape Στείλε το άρθρο στο netvouz Στείλε το άρθρο στο newsvine Στείλε το άρθρο στο rawsugar Στείλε το άρθρο στο reddit Στείλε το άρθρο στο scuttle Στείλε το άρθρο στο shadows Στείλε το άρθρο στο simpy Στείλε το άρθρο στο slashdot Στείλε το άρθρο στο spurl Στείλε το άρθρο στο technorati Στείλε το άρθρο στο wists

Διαβάστε περισσότερα Σχόλια (2) 266 Views October 2, 2007 (2:20PM)

code 2 css

Από το http://www.free-css-templates.com/
Ο τύπος έχει βρει έναν όμορφο τρόπο να παρουσιάζει code μέσα στην ιστοσελίδα του, μάλιστα έχει φτιάξει και μια web εφαρμογή code2css όπου μπορεί κανείς να βάλει το code που επιθυμεί και να το παρουσιάσει με αυτό τον τρόπο.

Μου άρεσε η τεχνική (αν και είναι δύσκολη να την κάνεις manual) και λέω να την χρησιμοποιήσω στο S4A, παρακάτω είναι το CSS για το συγκεκριμένο style.


  1. <style type="text/css">
  2.  
  3. ol {
  4. padding:0 0 0 2.5em;
  5. }
  6.  
  7. .code {
  8. padding:3px 3px 3px 40px;
  9. border:1px solid #808080;
  10. list-style-type: decimal-leading-zero;
  11. font-family: verdana
  12. }
  13.  
  14. .code code {
  15. font-family: "Palatino Linotype", Tahoma;
  16. font-size: 1.1em;
  17. color:#000000;
  18. }
  19.  
  20. .code li {
  21. margin:2px 0 2px 0px;
  22. padding:0 5px 0 5px;
  23. background:#f7f7f5;
  24. color:#804040;
  25. }
  26.  
  27. .code li.t0 { padding-left:.5ex }
  28. .code li.t1 { padding-left:4ex }
  29. .code li.t2 { padding-left:8ex }
  30. .code li.t3 { padding-left:12ex }
  31. .code li.t4 { padding-left:16ex }
  32. .code li.t5 { padding-left:20ex }
  33. .code li.t6 { padding-left:24ex }
  34. .code li.t7 { padding-left:28ex }
  35. .code li.t8 { padding-left:32ex }
  36.  
  37. </style>

Στείλε το άρθρο στο
Στείλε το άρθρο στο blinkbits Στείλε το άρθρο στο blogmarks Στείλε το άρθρο στο del.icio.us Στείλε το άρθρο στο digg Στείλε το άρθρο στο fark Στείλε το άρθρο στο furl Στείλε το άρθρο στο google Στείλε το άρθρο στο ma.gnolia Στείλε το άρθρο στο myweb Στείλε το άρθρο στο netscape Στείλε το άρθρο στο netvouz Στείλε το άρθρο στο newsvine Στείλε το άρθρο στο rawsugar Στείλε το άρθρο στο reddit Στείλε το άρθρο στο scuttle Στείλε το άρθρο στο shadows Στείλε το άρθρο στο simpy Στείλε το άρθρο στο slashdot Στείλε το άρθρο στο spurl Στείλε το άρθρο στο technorati Στείλε το άρθρο στο wists

Σχόλια (1) 224 Views September 10, 2007 (1:16PM)

CSS style for S4A

Επιτέλους μπορώ να πω ότι το CSS είναι κατά 99% έτοιμο!!

Φυσικά έχει κάποια λαθάκια και πρέπει όταν βρω χρόνο να του κάνω ένα μικρό optimize γιατί είναι λίγο χαοτικό έτσι όπως είναι, ωστόσο είναι 100% valid και μάλιστα με XHTML 1.0 Strict.

Ορίστε και τα παράσημα :)

Valid CSS!

Valid XHTML 1.0 Strict

Στείλε το άρθρο στο
Στείλε το άρθρο στο blinkbits Στείλε το άρθρο στο blogmarks Στείλε το άρθρο στο del.icio.us Στείλε το άρθρο στο digg Στείλε το άρθρο στο fark Στείλε το άρθρο στο furl Στείλε το άρθρο στο google Στείλε το άρθρο στο ma.gnolia Στείλε το άρθρο στο myweb Στείλε το άρθρο στο netscape Στείλε το άρθρο στο netvouz Στείλε το άρθρο στο newsvine Στείλε το άρθρο στο rawsugar Στείλε το άρθρο στο reddit Στείλε το άρθρο στο scuttle Στείλε το άρθρο στο shadows Στείλε το άρθρο στο simpy Στείλε το άρθρο στο slashdot Στείλε το άρθρο στο spurl Στείλε το άρθρο στο technorati Στείλε το άρθρο στο wists

Πες το με δικά σου λόγια 155 Views July 13, 2007 (3:25PM)

Σελίδες: 1 2

Κατηγορίες blog

Νέα άρθρα

Δημοφιλή άρθρα

Σχόλια

RSS

Users Online

 

Tags: wehellas   music   personality   chill-out   xhtml   i-like-you   nodies_thoughtroom   javascript   blogs   skateboarding   skull   downloads   c   simply   forums   jokes   linux-fun   jailbait   yaya   ebest   sexy   todaynews   hot-or-not   programming   video   encryption   eminem   games   grtube   i-am-sorry   email   dateplanet   internet   php   computer   css  

simply4all.net
some rights reserved

xhtml css rss
επικοινωνια οροι χρησης αποποιηση ευθυνων