Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Anastasis

Tutorials Από Advanced UI CSS3 Effects

Recommended Posts

Όλοι γνωρίζουμε ότι η τεχνολογία εξελίσσεται ραγδαία, και τα προγράμματα περιήγησης στο Web κάνουν συνεχώς αλλαγές για τη βελτίωση των προτύπων τους, έτσι και οι web developers επίσης, προσπαθούν συνεχώς να υιοθετήσουν αυτές τις αλλαγές. Πιστεύουμε ότι όλες αυτές οι αλλαγές είναι θετικές και αυτό σίγουρα θα οδηγήσει σε αυξημένη στήριξη και φυσικά κάνοντας τον frontend χρόνο ανάπτυξης πολύ πιο εύκολο.

 

Δεδομένου ότι νέες τεχνικές που εισάγονται κάθε λίγο και λιγάκι, νομίζω ότι ο καλύτερος τρόπος για να μάθουμε νέα πράγματα είναι μέσω online tutorials. Σήμερα, σε αυτό το άρθρο θα παρουσιάσουμε μια λίστα με μεγάλα CSS3 tutorials, μέσω των οποίων μπορείτε να μάθετε περισσότερα σχετικά με προηγμένες διεπαφές. Παρά το γεγονός ότι αυτά τα tutorials περιστρέφονται γύρω απο τη CSS3, θα μάθετε ακόμα πολλές νέες τεχνικές και μπορείτε να τις ενσωματώσετε ως προγραμματιστής όποτε θέλετε.

 

Ας ρίξουμε μια ματιά στα tutorials αυτά.

 

Interactive Infographic with SVG and CSS Animations

 

Interactive Infographic with SVG and CSS Animations
Είναι βέβαιο ότι δεν γνωρίζουν και πολλοί την «Scalable Vector Graphics» μορφή. Το καλύτερο σχετικά με τη SVG μορφή είναι ότι είναι επεκτάσιμη χωρίς να καταστρέφει το αποτέλεσμα. Για να δημιουργήσετε SVG αρχείο με τα αποτελέσματα και τις αλληλεπιδράσεις, δείτε το SVG tutorial και θα μάθετε πολλά.

 

Animated 3D Bar Chart with CSS3

 

Animated 3D Bar Chart with CSS3

 

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

 

Understanding the CSS Clip Property

 

Understanding the CSS Clip Property
Αυτό το «Clip» property είναι ένα μοναδικό CSS property. Επειδή δεν χρησιμοποιείται πολύ, είναι σίγουρο ότι πολλοί προγραμματιστές δεν γνωρίζουν καν γι ‘αυτό. Για να το καταλάβετε καλύτερα, αυτό το χαρακτηριστικό είναι γνωστό ως crop στην απλή γλώσσα. Ωστόσο, αυτό μπορεί να γίνει τώρα με τo CSS clip property και το σχετικό tutorial θα σας δείξει πώς.

 

Annotation Overlay Effect with CSS3

 

Annotation Overlay Effect with CSS3
Αυτό το tutorial είναι σχετικό με τη δημιουργία ενός overlay effect για να δει βαθιά μέσα σε οποιοδήποτε στοιχείο ή φωτογραφία για λεπτομέρειες. Με την τεχνική αυτή μια εικόνα γίνεται clickable και ο καθένας μπορεί να το δεί ως overlay.

 

Animated Content Tabs with CSS3

 

Animated Content Tabs with CSS3
Όλοι γνωρίζουμε ότι οι καρτέλες περιεχoμένου είναι πολύ σημαντικές και είναι αρκετά χρήσιμες επίσης. Αυτό το tutorial θα σας βοηθήσει απλά και εύκολα να δημιουργήσετε CSS3 καρτέλες περιεχομένου με τη χρήση των κουμπιών.

 

Enhance Required Form Fields with CSS3

 

Enhance Required Form Fields with CSS3
Αυτό το tutorial θα σας βοηθήσει στην ενίσχυση των απαιτούμενων πεδίων σε οποιαδήποτε μορφή, ενώ κάνει τα προαιρετικά πεδία λιγότερο ορατά. Με αυτό, μπορείτε να δημιουργήσετε ένα πολύ καλό αποτέλεσμα.

 

How to create animated tooltips with CSS3

 

How to create animated tooltips with CSS3
Θέλετε να δημιουργήσετε ένα κινούμενο tooltip με CSS3; Αυτό το tutorial θα σας βοηθήσει. Αυτό μπορεί να γίνει απλά με τη χρήση των CSS μεταβάσεων και, φυσικά με τα pseudo-classes.

 

Responsive CSS Timeline with 3D Effect

 

Responsive CSS Timeline with 3D Effect
Αυτό το tutorial θα σας βοηθήσει πραγματικά στη δημιουργία ενός πολύ ενδιαφέροντος πράγματος. Είναι όλα σχετικά με τη δημιουργία ενός ανταποκρινόμενου χρονοδιαγράμματος CSS με εκπληκτικά 3D εφέ.

 

Filter Functionality with CSS3

 

Filter Functionality with CSS3
Θέλετε να αλλάξετε την κατάσταση των στοιχείων; Αυτό το tutorial θα σας μάθει πώς να το κάνετε. Η εναλλαγή θα γίνεται μέσω λειτουργιών του φίλτρου.

 

How to Create Bounce Effect with CSS3 Animation

 

How to Create Bounce Effect with CSS3 Animation
Εάν θέλετε να δημιουργήσετε ένα εφέ αναπήδησης με animated CSS3, αυτό το tutorial θα σας εξηγήσει πώς να το κάνετε. Με αυτή την έννοια, το αντικείμενο θα πέσει αρχικά και στη συνέχεια θα αναπηδήσει, προκειμένου να φθάσει στο υψηλότερο επίπεδο.

 

Multiple Columns Layout (Magazine-alike) With CSS3

 

Multiple Columns Layout (Magazine-alike) With CSS3
Τα πολλαπλά σχεδιαγράμματα στηλών κάνει την ανάγνωση πολύ πιο εύκολη, αλλά η δημιουργία στηλών στο διαδίκτυο δεν είναι μια εύκολη δουλειά. Τα CSS3 έχουν απλοποιήσει τα πράγματα πολύ και με την δημιουργία διάταξης πολλαπλών στηλών δεν είναι πλέον τόσο δύσκολο και αυτό το tutorial θα σας δείξει πώς

 

Understanding the CSS3 calc() Function

 

Understanding the CSS3 calc() Function
Αυτή η λειτουργία θα σας βοηθήσει στον καθορισμό διαφόρων μηκών, για παράδειγμα, το πλάτος, το ύψος κ.τ.λ. Με την ανάγνωση αυτού του tutorial σε βάθος, θα ξέρετε πώς να χρησιμοποιείτε το CSS3 calc () function.

 

Custom Checkboxes and Radio Buttons

 

Custom Checkboxes and Radio Buttons
Εάν θέλετε να προσαρμόσετε τις παρουσιάσεις ιστοσελίδων, αυτό είναι το tutorial που θα σας βοηθήσει με αυτό. Θα σας βοηθήσει στην προσαρμογή του checkbox’s look.

 

Cool Image Caption Techniques

 

Cool Image Caption Techniques
Θέλετε να δημιουργήσετε ένα εφέ μετάβασης; Αυτό το tutorial θα κάνει τα πράγματα πολύ πιο εύκολα για σας, ώστε να δημιουργήσετε όμορφες image caption τεχνικές. Μπορείτε να δημιουργήσετε απλά λεζάντες εικόνας με μεταβατικές τεχνικές.

 

CSS3 :First-Of-Type Selector

 

CSS3 First-Of-Type Selector
Το CSS3 είναι ο λόγος πίσω από τις νέες προσθήκες επιλογών, ωστόσο, αυτό το tutorial θα καλύψει το πρώτο είδος επιλογών.

 

Breadcrumb Navigation

 

Breadcrumb Navigation
Τα μενού πλοήγησης είναι αναμφισβήτητα τα πιο σημαντικά πράγματα σε μια ιστοσελίδα. Αυτό το tutorial θα σας βοηθήσει στη δημιουργία μερικών φοβερών μενού πλοήγησης με CSS3 εφέ.

 

Responsive Form with HTML5/CSS3

 

Responsive Form with HTML5 CSS3
Χάρη στο CSS3 μπορείτε τώρα να δημιουργήσετε στρογγυλεμένες γωνίες, σκιές και όχι μόνο. Αυτό το tutorial θα σας βοηθήσει στη δημιουργία ωραίων CSS3 εφέ με HTML5 και CSS3.

 

CSS3 Linear Gradients

 

CSS3 Linear Gradients
Το Gradient είναι σίγουρα μια από τις καλύτερες προσθήκες χρώματος στο CSS3. Έτσι, θέλετε να προσθέσετε πολλαπλά χρώματα σε κάτι; Αυτό το tutorial είναι η απάντησή σας

 

CSS3 Repeating Gradients

 

CSS3 Repeating Gradients
Τα repeating gradients θεωρείται ότι είναι μια επέκταση. Αυτό θα βοηθήσει στην επανάληψη χρωμάτων σε μια συγκεκριμένη κατεύθυνση. Έτσι, εάν θέλετε να επαναλάβετε liner gradients, το tutorial αυτό είναι όπου θα βρείτε όλες τις πληροφορίες.

 

Paragraph Dropcaps

 

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

 

Scalable Vector Graphics with CSS3

 

Scalable Vector Graphics with CSS3
Όπως αναφέρθηκε παραπάνω, πολλά μπορούν να γίνουν με το συνδυασμό των SVG και CSS3. Συνεχίστε να διαβάζετε το tutorial για να μάθετε τι άλλο μπορείτε να κάνετε

 

CSS3 Image Adjustment Filters

 

CSS3 Image Adjustment Filters
Θέλετε να ρυθμίσετε τη φωτεινότητα, ή το συνδυασμό χρωμάτων μιας εικόνας; Δεν χρειάζεται πλέον ένα photoshop για αυτό. Αυτό μπορεί να γίνει επίσης και με CSS3. Μάθετε πώς.

 

Getting Started with Sass

 

Getting Started with Sass
Αυτό το tutorial θα σας βοηθήσει να ξεκινήσετε με το Sass. Από την εγκατάσταση μέχρι τη χρήση, θα βρείτε τα πάντα εδώ.

 

CSS Grid Layouts in WordPress

 

CSS Grid Layouts in WordPress
Το να έχουμε μια ωραία διάταξη στο WordPress είναι πάντα δύσκολο. Ωστόσο, με αυτό το tutorial μπορείτε να μάθετε πώς να δημιουργήσετε ένα κατάλληλο δίκτυο σε WordPress, χωρίς να αντιμετωπίζει πολλές δυσκολίες.

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×