Anastasis 48 Report post Posted November 27, 2016 Όλοι γνωρίζουμε ότι η τεχνολογία εξελίσσεται ραγδαία, και τα προγράμματα περιήγησης στο Web κάνουν συνεχώς αλλαγές για τη βελτίωση των προτύπων τους, έτσι και οι web developers επίσης, προσπαθούν συνεχώς να υιοθετήσουν αυτές τις αλλαγές. Πιστεύουμε ότι όλες αυτές οι αλλαγές είναι θετικές και αυτό σίγουρα θα οδηγήσει σε αυξημένη στήριξη και φυσικά κάνοντας τον frontend χρόνο ανάπτυξης πολύ πιο εύκολο. Δεδομένου ότι νέες τεχνικές που εισάγονται κάθε λίγο και λιγάκι, νομίζω ότι ο καλύτερος τρόπος για να μάθουμε νέα πράγματα είναι μέσω online tutorials. Σήμερα, σε αυτό το άρθρο θα παρουσιάσουμε μια λίστα με μεγάλα CSS3 tutorials, μέσω των οποίων μπορείτε να μάθετε περισσότερα σχετικά με προηγμένες διεπαφές. Παρά το γεγονός ότι αυτά τα tutorials περιστρέφονται γύρω απο τη CSS3, θα μάθετε ακόμα πολλές νέες τεχνικές και μπορείτε να τις ενσωματώσετε ως προγραμματιστής όποτε θέλετε. Ας ρίξουμε μια ματιά στα tutorials αυτά. Interactive Infographic with SVG and CSS Animations Είναι βέβαιο ότι δεν γνωρίζουν και πολλοί την «Scalable Vector Graphics» μορφή. Το καλύτερο σχετικά με τη SVG μορφή είναι ότι είναι επεκτάσιμη χωρίς να καταστρέφει το αποτέλεσμα. Για να δημιουργήσετε SVG αρχείο με τα αποτελέσματα και τις αλληλεπιδράσεις, δείτε το SVG tutorial και θα μάθετε πολλά. Animated 3D Bar Chart with CSS3 Αυτό το tutorial θα σας βοηθήσει στη δημιουργία ενός πλήρους 3D διαγράμματος. Θα πρέπει να ακολουθήσετε μερικές συμβουλές, για παράδειγμα, θα πρέπει να έχει ένα ανεξάρτητο υπόβαθρο, θα πρέπει να είναι προσαρμοστικό, επεκτάσιμο και φυσικά προσαρμόσιμο. Understanding the CSS Clip Property Αυτό το «Clip» property είναι ένα μοναδικό CSS property. Επειδή δεν χρησιμοποιείται πολύ, είναι σίγουρο ότι πολλοί προγραμματιστές δεν γνωρίζουν καν γι ‘αυτό. Για να το καταλάβετε καλύτερα, αυτό το χαρακτηριστικό είναι γνωστό ως crop στην απλή γλώσσα. Ωστόσο, αυτό μπορεί να γίνει τώρα με τo CSS clip property και το σχετικό tutorial θα σας δείξει πώς. Annotation Overlay Effect with CSS3 Αυτό το tutorial είναι σχετικό με τη δημιουργία ενός overlay effect για να δει βαθιά μέσα σε οποιοδήποτε στοιχείο ή φωτογραφία για λεπτομέρειες. Με την τεχνική αυτή μια εικόνα γίνεται clickable και ο καθένας μπορεί να το δεί ως overlay. Animated Content Tabs with CSS3 Όλοι γνωρίζουμε ότι οι καρτέλες περιεχoμένου είναι πολύ σημαντικές και είναι αρκετά χρήσιμες επίσης. Αυτό το tutorial θα σας βοηθήσει απλά και εύκολα να δημιουργήσετε CSS3 καρτέλες περιεχομένου με τη χρήση των κουμπιών. Enhance Required Form Fields with CSS3 Αυτό το tutorial θα σας βοηθήσει στην ενίσχυση των απαιτούμενων πεδίων σε οποιαδήποτε μορφή, ενώ κάνει τα προαιρετικά πεδία λιγότερο ορατά. Με αυτό, μπορείτε να δημιουργήσετε ένα πολύ καλό αποτέλεσμα. How to create animated tooltips with CSS3 Θέλετε να δημιουργήσετε ένα κινούμενο tooltip με CSS3; Αυτό το tutorial θα σας βοηθήσει. Αυτό μπορεί να γίνει απλά με τη χρήση των CSS μεταβάσεων και, φυσικά με τα pseudo-classes. Responsive CSS Timeline with 3D Effect Αυτό το tutorial θα σας βοηθήσει πραγματικά στη δημιουργία ενός πολύ ενδιαφέροντος πράγματος. Είναι όλα σχετικά με τη δημιουργία ενός ανταποκρινόμενου χρονοδιαγράμματος CSS με εκπληκτικά 3D εφέ. Filter Functionality with CSS3 Θέλετε να αλλάξετε την κατάσταση των στοιχείων; Αυτό το tutorial θα σας μάθει πώς να το κάνετε. Η εναλλαγή θα γίνεται μέσω λειτουργιών του φίλτρου. How to Create Bounce Effect with CSS3 Animation Εάν θέλετε να δημιουργήσετε ένα εφέ αναπήδησης με animated CSS3, αυτό το tutorial θα σας εξηγήσει πώς να το κάνετε. Με αυτή την έννοια, το αντικείμενο θα πέσει αρχικά και στη συνέχεια θα αναπηδήσει, προκειμένου να φθάσει στο υψηλότερο επίπεδο. Multiple Columns Layout (Magazine-alike) With CSS3 Τα πολλαπλά σχεδιαγράμματα στηλών κάνει την ανάγνωση πολύ πιο εύκολη, αλλά η δημιουργία στηλών στο διαδίκτυο δεν είναι μια εύκολη δουλειά. Τα CSS3 έχουν απλοποιήσει τα πράγματα πολύ και με την δημιουργία διάταξης πολλαπλών στηλών δεν είναι πλέον τόσο δύσκολο και αυτό το tutorial θα σας δείξει πώς Understanding the CSS3 calc() Function Αυτή η λειτουργία θα σας βοηθήσει στον καθορισμό διαφόρων μηκών, για παράδειγμα, το πλάτος, το ύψος κ.τ.λ. Με την ανάγνωση αυτού του tutorial σε βάθος, θα ξέρετε πώς να χρησιμοποιείτε το CSS3 calc () function. Custom Checkboxes and Radio Buttons Εάν θέλετε να προσαρμόσετε τις παρουσιάσεις ιστοσελίδων, αυτό είναι το tutorial που θα σας βοηθήσει με αυτό. Θα σας βοηθήσει στην προσαρμογή του checkbox’s look. Cool Image Caption Techniques Θέλετε να δημιουργήσετε ένα εφέ μετάβασης; Αυτό το tutorial θα κάνει τα πράγματα πολύ πιο εύκολα για σας, ώστε να δημιουργήσετε όμορφες image caption τεχνικές. Μπορείτε να δημιουργήσετε απλά λεζάντες εικόνας με μεταβατικές τεχνικές. CSS3 :First-Of-Type Selector Το CSS3 είναι ο λόγος πίσω από τις νέες προσθήκες επιλογών, ωστόσο, αυτό το tutorial θα καλύψει το πρώτο είδος επιλογών. Breadcrumb Navigation Τα μενού πλοήγησης είναι αναμφισβήτητα τα πιο σημαντικά πράγματα σε μια ιστοσελίδα. Αυτό το tutorial θα σας βοηθήσει στη δημιουργία μερικών φοβερών μενού πλοήγησης με CSS3 εφέ. Responsive Form with HTML5/CSS3 Χάρη στο CSS3 μπορείτε τώρα να δημιουργήσετε στρογγυλεμένες γωνίες, σκιές και όχι μόνο. Αυτό το tutorial θα σας βοηθήσει στη δημιουργία ωραίων CSS3 εφέ με HTML5 και CSS3. CSS3 Linear Gradients Το Gradient είναι σίγουρα μια από τις καλύτερες προσθήκες χρώματος στο CSS3. Έτσι, θέλετε να προσθέσετε πολλαπλά χρώματα σε κάτι; Αυτό το tutorial είναι η απάντησή σας CSS3 Repeating Gradients Τα repeating gradients θεωρείται ότι είναι μια επέκταση. Αυτό θα βοηθήσει στην επανάληψη χρωμάτων σε μια συγκεκριμένη κατεύθυνση. Έτσι, εάν θέλετε να επαναλάβετε liner gradients, το tutorial αυτό είναι όπου θα βρείτε όλες τις πληροφορίες. Paragraph Dropcaps Αυτό χρησιμοποιείται σπάνια, αλλά υπήρχε πάντα. Εάν θέλετε να δημιουργήσετε ένα τυπογραφικό εφέ για τα πρώτα γράμματα μιας παραγράφου, αυτό το tutorial θα σας δώσει πλήρεις πληροφορίες σχετικά με το πώς να γίνει αυτό. Scalable Vector Graphics with CSS3 Όπως αναφέρθηκε παραπάνω, πολλά μπορούν να γίνουν με το συνδυασμό των SVG και CSS3. Συνεχίστε να διαβάζετε το tutorial για να μάθετε τι άλλο μπορείτε να κάνετε CSS3 Image Adjustment Filters Θέλετε να ρυθμίσετε τη φωτεινότητα, ή το συνδυασμό χρωμάτων μιας εικόνας; Δεν χρειάζεται πλέον ένα photoshop για αυτό. Αυτό μπορεί να γίνει επίσης και με CSS3. Μάθετε πώς. Getting Started with Sass Αυτό το tutorial θα σας βοηθήσει να ξεκινήσετε με το Sass. Από την εγκατάσταση μέχρι τη χρήση, θα βρείτε τα πάντα εδώ. CSS Grid Layouts in WordPress Το να έχουμε μια ωραία διάταξη στο WordPress είναι πάντα δύσκολο. Ωστόσο, με αυτό το tutorial μπορείτε να μάθετε πώς να δημιουργήσετε ένα κατάλληλο δίκτυο σε WordPress, χωρίς να αντιμετωπίζει πολλές δυσκολίες. Quote Share this post Link to post Share on other sites
