CSS3 Media Queries

CSS3 Media Queries

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε με media queries να ελέγξουμε το πλάτος και το ύψος ενός παραθύρου ή μία συσκευής, το προσανατολισμό (είναι το tablet/τηλέφωνο σε οριζόντια ή κατακόρυφη λειτουργία;) και την ανάλυση. Με τη χρήση των media queries μπορούμε να έχουμε ένα προσαρμοσμένο στυλ ανάλογα με την συσκευή (tablet, iPhone, Android).

 

Δοκιμάστε!

 

CSS3 κουμπιά

CSS3 κουμπιά

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε με CSS3 να αλλάξουμε εύκολα την μορφή των κουμπιών(buttons).

 

Δοκιμάστε!

 

CSS3 εικόνες

CSS3 εικόνες

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε με CSS3 να αλλάξουμε εύκολα την μορφή των εικόνων.

 

Δοκιμάστε!

 

CSS3 Animations

CSS3 Animations

Μπορείτε να δημιουργείστε εύκολα animations μόνο με CSS3 χωρίς τη χρήση flash ή javascript. Μπορείτε να αλλάξετε όσες CSS ιδιότητες θέλετε, όσες φορές θέλετε. Για να χρησιμοποιήσετε CSS3 animation, θα πρέπει πρώτα να καθορίσετε κάποια keyframes για την κινούμενη εικόνα .Τα Keyframes ορίζουν το στυλ του στοιχείου σε συγκεκριμένες χρονικές στιγμές.

 

Δοκιμάστε!

 

CSS3 2D/3D Μετασχηματισμοί

CSS3 2D/3D Μετασχηματισμοί

Η CSS3 υποστηρίζει 2D/3D μετασχηματισμούς για να μετακινήσετε, να περιστρέψτε , να μεγεθύνετε , και να τροποποιήστε HTML στοιχεία.

 

CSS3 2D Μετασχηματισμοί

Θα δούμε τις μεθόδους: translate(), rotate(), scale(), skewX(), skewY() και matrix() για 2D μετασχηματισμούς.

Δοκιμάστε!

 

CSS3 3D Μετασχηματισμοί

Θα δούμε τις μεθόδους: rotateX(), rotateY() και rotateZ() για 3D μετασχηματισμούς.

Δοκιμάστε!

 

CSS3 στρογγυλεμένες γωνίες, εφέ σκιάς

CSS3

Η CSS3 είναι το τελευταίο πρότυπο της CSS. Στις επόμενες αναρτήσεις θα δούμε τα νέα χαρακτηριστικά της CSS3! Μερικά από τα ποιο σημαντικά στοιχεία της CSS3 είναι
οι Selectors, το Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout.

 

CSS3 στρογγυλεμένες γωνίες

Με την ιδιότητα border-radius, μπορούμε να κάνουμε στρογγυλεμένες γωνίες.

Δοκιμάστε!

 

CSS3 εφέ σκιάς

Με την CSS3 μπορούμε να προσθέσουμε σκιά σε κείμενα και στοιχεία με τις ιδιότητες text-shadow και box-shadow.

Δοκιμάστε!