CSS3 είναι πραγματικά αρχίζει να επιταχυνθεί με πολλές από τις εντολές που περιγράφονται στο CSS3 σχέδιο εργασίας που υποστηρίζονται από το Firefox, Safari και Google Chrome. Νομίζαμε ότι είχαμε βάλει μαζί μερικά από τα αγαπημένα μας. Πριν ξεκινήσουμε CSS3 εντολές απαιτούν πρόγραμμα περιήγησης συγκεκριμένη σύνταξη γι 'αυτούς να εργαστούν.

Για Mozilla Firefox θα χρειαστεί να χρησιμοποιήσετε το-moz-πρόθεμα, όπως για παράδειγμα:

-Moz-σύνορα-ακτίνα:

Και για το Safari WebKit-πρόθεμα, όπως για παράδειγμα:

-Webkit-σύνορα-ακτίνα:

1. Ακτίνα των συνόρων

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

/ * Για το Mozilla Firefox * /
-Moz-σύνορα-ακτίνα: 20px?

/ * Για το Safari και Google Chrome * /
-Webkit-σύνορα-ακτίνα: 20px?
}

2. Σκιά Box

Μια σκιά μπορεί να εφαρμοστεί σε στοιχεία χρησιμοποιώντας το CSS3 εντολή σκιά κουτί. Η σκιά κουτί δέχεται τρεις αριθμητικές τιμές συν ένα χρώμα για να εφαρμόσουν αυτό το αποτέλεσμα. Οι αριθμοί αυτοί είναι:

1. Απόσταση από οριζόντια offset της σκιάς - Μια θετική τιμή σημαίνει η σκιά θα ρίξει προς τα δεξιά και μια αρνητική τιμή προς τα αριστερά
2. Απόσταση από κάθετη μετατόπιση της σκιάς - Μια θετική τιμή σημαίνει η σκιά θα ρίχνει κάτω και μια αρνητική τιμή πάνω
3. Πώς θολή θέλετε τη σκιά

Με την προσθήκη ενός χρώματος αξία η σκιά είναι πλήρης:

/ * Για το Mozilla Firefox * /
-Moz-box-shadow: 5PX 5px 5px # b6ebf7?

/ * Για το Safari και Google Chrome * /
-Webkit-box-shadow: 5x 5px 5px # b6ebf7?

3. Διαφάνεια ή RGBA

Η διαφάνεια ήταν πάντα δύσκολη. Διαφορετικοί browsers ιστορικά έχουν εφαρμόσει τη διαφάνεια χρησιμοποιώντας διαφορετικές εντολές. Συνεχίζοντας αυτό το cross-browser ασυνέπεια έχουμε την προσθήκη του νέου ακινήτου φόντο CSS3 RGBA, ωστόσο, κατ 'αρχήν αυτή η εντολή είναι πιο λογική. Η εντολή αποτελείται από 4 αξίες - το πρώτο, δεύτερο και τρίτο είναι το κόκκινο, πράσινο και μπλε τιμές (0-255), αντίστοιχα, που ακολουθείται από το κανάλι άλφα ή τη διαφάνεια (0-1).

Για την εντολή RGBA το πρόγραμμα περιήγησης ειδικά προθέματα (-moz-,-WebKit-) δεν απαιτούνται:

# Box3 {
υπόβαθρο-χρώμα: RGBA (110, 142, 185, 0.5)?
}

Η εντολή χρώμα του φόντου προσθέτει ένα ωραίο μπλε-γκρίζο φόντο στο 0,5 ή 50% της αδιαφάνειας σε browsers που καταλαβαίνουν το CSS3 RGBA ιδιοκτησίας.

Δυστυχώς, ο Internet Explorer θα επιχειρήσει επίσης να καταστήσει την εντολή χρώμα του φόντου, αλλά δεν καταλαβαίνω RGBA. Για να εξασφαλιστεί ότι το χρώμα φόντου ορίζεται επίσης σε δηλαδή ένα IE-μόνο αμυχή απαιτείται. Στο παρακάτω παράδειγμα το: τελευταίο παιδί ψευδο-επιλογέα που ο Internet Explorer δεν καταλαβαίνει χρησιμοποιείται για να την αποκλείσει.

σώμα: το τελευταίο παιδί # box3 {
/ * Εξαίρεση όλων των IE browsers που χρησιμοποιούν: το τελευταίο-το παιδί * /
υπόβαθρο-χρώμα:! RGBA (110, 142, 185, .5) σημαντικό?
}

4. Στήλες

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

/ * Για το Mozilla Firefox * /
-Moz-στήλη-Count: 2?
-Moz-στήλη-κενό: 20px?
-Moz-στήλη-κανόνας: 1px solid # 6e8eb9?

/ * Για το Safari και Google Chrome * /
-Webkit-στήλη-Count: 2?
-Webkit-στήλη-κενό: 20px?
-Webkit-στήλη-κανόνας: 1px solid # 6e8eb9?
}

5. Πολλαπλές εικόνες φόντου

Εικόνων φόντου ήταν πάντα περιοριστικά, όταν πρόκειται για CSS οφείλεται στο γεγονός μπορείτε να εφαρμόσετε μόνο μία εικόνα φόντου για κάθε στοιχείο. Αυτό δεν συμβαίνει με CSS3 η οποία επιτρέπει πολλαπλές εικόνες ανά στοιχείο, απλά τους κόμμα-που χωρίζει.

Για να τοποθετήσετε μια εικόνα τόσο για την αριστερά και δεξιά της ένα στοιχείο που μπορείτε να χρησιμοποιήσετε τις ακόλουθες εντολές, με λίγο styling:

padding: 0 20px?
}

Αυτή η εντολή θα είναι λανθασμένη που παρέχονται από τον Internet Explorer, καθώς δεν αποδέχεται 2 εικόνες φόντου σε ένα μόνο στοιχείο. Μια αποκλείει οποιαδήποτε αμυχή IE είναι απαραίτητη.

# Box5 blockquote {
/ * Για όλους τους περιηγητές, μόνο μια ανοικτή προσφορά * /
υπόβαθρο: url (/ i / quotel.gif) 0 0 κανένας-επαναλαμβάνω?
padding: 0 20px?
}

σώμα: το τελευταίο παιδί # box5 blockquote {
/ * Εξαίρεση όλων των IE browsers που χρησιμοποιούν: το τελευταίο-το παιδί * /
/ * Στη συνέχεια, οι δύο εικόνες * /
υπόβαθρο: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) δεν-επαναλαμβάνω 100% 0?
}

6. Κλίσεις Ιστορικό

CSS3 κλίσεις υποβάθρου είναι εξαιρετικά ευέλικτα και μπορούν να χρησιμοποιηθούν για να δημιουργήσουν πολύπλοκα σχήματα. Στην απλούστερη μορφή του το CSS γραμμική κλήση επιτρέπει σε μια κλίση που πρέπει να εφαρμόζονται σε ένα στοιχείο από πάνω προς τα κάτω και αριστερά προς τα δεξιά.

Αυτό το παράδειγμα της μια κλίση CSS3 στο Mozilla Firefox εφαρμόζει μια γαλάζια κλίση στο κάτω μέρος του ένα κουτί μόνο το 20% του ύψους των πλαισίων »

Safari χρησιμοποιεί μια λιγότερο διαισθητική αλλά πιο ευέλικτη προσέγγιση για τη χρήση χρωμάτων αξίες σταματήσει. Ένα παράδειγμα του Safari συγκεκριμένο κωδικό εξής (σημειώστε τη γραμμική περιλαμβάνεται σε παρένθεση αντί για έξω):

# Box8 {
υπόβαθρο:-webkit-κλίση (γραμμική, κάτω αριστερά, αριστερά επάνω, το χρώμα-stop (0, # b6ebf7), το χρώμα-stop (0,20, # fff))?
}

7. Περιστροφή

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

<code> # box9 {
-Moz-μετατρέπουν: περιστροφή (2deg)?
-Webkit-μετατρέπουν: περιστροφή (2deg)?
} </ Code>

8. Περιγράμματα

Outilines περιλαμβάνονται στις προδιαγραφές του CSS3 και θα επιτρέψει τόσο στα σύνορα και ένα περίγραμμα που θα εφαρμοστεί σε ένα μόνο στοιχείο.

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

Filed under: Css από admin