Μαγία CSS : Ο τέλειος οδηγός !

Έχω βαρεθεί να ψάχνω στο Google για όλα αυτά τα μικρά μυστικά που χρησιμοποιούμε συχνά στη δουλειά μας με το CSS. Νομίζω πως θα ήταν ωραίο να τα είχαμε όλα μαζί συγκεντρωμένα σε μια σελίδα και να τα παίρνουμε από εκεί αντί να καταναλώνουμε ώρες αναζήτησης. Αυτός είναι ο λόγος που έγραψα αυτή τη λίστα με αναφορές στα καλύτερα μυστικά για CSS. Φυσικά δεν θα βρείτε τα πάντα σε αυτή τη λίστα, αλλά μόνο αυτά που είναι συμβατά με όλους τους περιηγητές, είναι εύκολα στη χρήση και που αναβαθμίζονται αρκετά συχνά για να σας γλυτώσει από την τρέλα που δημιουργεί ο Internet Explorer. Ας τα δούμε λοιπόν :

Πλαίσια με κυρτές γωνίες

Πρέπει να έχετε στη σελίδα που φτιάχνετε πλαίσια με κυρτές γωνίες. Εδώ θα βρείτε μερικές καλές λύσεις.

Nifty Corners Cube

Δεν χρειάζεται να έχετε άλλο φοβίες με τις κυρτές γωνίες, το Nifty Corners Cube είναι εδώ. Από εδώ και πέρα δεν θα χρειαστείτε ξανά εικόνες για να κάνετε τις γωνίες σας κυρτές, θα τα αναλάβει όλα η Javascript / CSS. Απλό στη χρήση και λειτουργεί με όλους τους περιηγητές.

Spiffy Corners Generator

Θέλετε κάτι ποιο απλό; Τώρα υπάρχει η λύση. Με το Spiffy Corners Generator κάνετε τις ρυθμίσεις σας όπως τις θέλετε και απλά αντιγράφετε τον κώδικα στη σελίδα σας.

Rounded Cornr Generator

Ακόμα ένας τρόπος για να δημιουργήσετε κυρτές γωνίες. Με αυτό το εργαλείο είναι ακόμα ποιο εύκολο να πάρετε το αποτέλεσμα που θέλετε. Επίσης είναι πλήρως παραμετροποιήσιμο.

Spanky Generator από το SitePoint

Αυτό το εργαλείο προέρχεται από ένα Forum που χρησιμοποιώ συχνά. Το SitePoint είναι μια από τις μεγαλύτερες κοινότητες για Web Developers.

Anti Aliased Nifty Corners

Βασισμένο στο Nifty Corners. Παρόλο που το Nifty Corners είναι καλό, δημιουργούσε άγριες γωνίες. Με αυτό το εργαλείο αυτό είναι παρελθόν. Το Anti Aliased Nifty Corners είναι βελτιωμένο και ποιο εύκολο στην εφαρμογή του.

Δημιουργία σκιάς με CSS

Επειδή χρειάζεστε και σκιές στις σελίδες σας σε κάποια div, images και άλλα εδώ έχω εργαλεία για σκιές.

A List Apart CSS σκιές

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

ALA CSS σκιές

Αυτό είναι ένα αρκετά δύσκολο σενάριο, αλλά με μερικές αλλαγές μπορεί να γίνει αρκετά εύκολο στη χρήση.

Πλοήγηση με καρτέλες CSS

Χρειάζεται να πω περισσότερα ; Πόσες φορές έχετε ψάξει για καρτέλες που να είναι εύκολες στη χρήση; Δείτε τις καρτέλες που ακολουθούν και χρησιμοποιήστε τες ! Είναι δωρεάν.

Navigation Matrix Reloaded

Αυτό το μενού έχω την εντύπωση πως χρησιμοποιεί η Apple. Με αυτή την τεχνική βάζουμε όλα τα tabs σε ένα αρχείο εικόνας και μετά το CSS κάνει όλη τη δουλειά. Από τη στιγμή που θα κατεβεί η εικόνα τον 20kb μπορείτε να κάνετε ότι θέλετε με το μενού.

Sliding Doors

Sliding Doors είναι ένα από τα λίγα στολίδια που έχουν δημιουργηθεί με CSS. Αφού το μάθετε αλλάζετε άμεσα επίπεδο. Το μόνο πρόβλημα με αυτή την τεχνική είναι που πρέπει να είναι floated δεξιά ή αριστερά.

Centered Sliding Doors

Ένας σοφός άντρα μια φορά είπε “δώσε μου ένα πρόβλημα για να σου δώσω μια λύση”. Το Sliding Doors λειτουργεί μόνο με float left ή float right, αλλά τα παιδιά στο 24 ways βρήκαν τη λύση σε αυτό το πρόβλημα.

CSS Mini Tabs

Αυτό δεν είναι μόνο απλό στη χρήση, αλλά έχει και υπέροχη εμφάνιση

Φόρμες με CSS

Ένα από τα ποιο δύσκολα πράγματα που μπορείτε να εργαστείτε επάνω του με τα CSS είναι οι φόρμες. Τις περισσότερες φορές τις δημιουργείτε με πίνακες γιατί είναι ο ποιο εύκολος τρόπος, αλλά υπάρχουν και φορές που πρέπει να τις κάνετε με CSS.

Pretty And Accessible Forms

Σε αυτό το άρθρο θα βρείτε ένα όμορφο και απλό τρόπο (όσο μπορεί να είναι απλός) για να έχετε φόρμες με CSS σε μερικά λεπτά.

Accessible CSS Forms

Wufoo CSS Forms generator

Αυτό είναι βασικά μια υπηρεσία που σας δίνει τη δυνατότητα να φτιάξετε το δικό σας λογαριασμό δωρεάν με τον οποίο μπορείτε να φτιάξετε μέχρι 3 φόρμες. Αν σας αρέσει αυτή η υπηρεσία μπορείτε να πληρώσετε συνδρομή, αλλά δεν νομίζω πως είναι πραγματικά κάτι απαραίτητο.

Rediscovering the Button Element

Ένα εργαλείο για τη δημιουργία κουμπιών στη σελίδα σας με το στυλ που εσείς θέλετε.

Fancy Form Elements

Αγαπώ τις ωραία σχεδιασμένες φόρμες, και αυτό το συστατικό χρησιμοποιεί λίγη Javascript για τη δημιουργία των ποιο cool checkbox / radio button που έχω δει μέχρι τώρα.

Περισσότερα για τον CorfuGmr

Όλα τα άρθρα

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.

Σχόλια

Air Max

21 Αυγούστου 2011

Good website! I really love how it is nice on my eyes it is. I am wondering

how I might be notified whenever a new post has been made. I’ve subscribed to your feed which may do the trick? Have a nice day!

Αφήστε ένα σχόλιο

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL