Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble

Anastasis

Moderators
 View Profile  See their activity

  • Content Count

    304

  • Joined

  • Last visited

  • Days Won

    2

  • Feedback

    N/A

Everything posted by Anastasis

  1. Anastasis
    Αυτή τη φορά πρόκειται να σας παρουσιάσουμε μια συλλογή ελεύθερων online HTML editors. Οι σχεδιαστές και οι προγραμματιστές χρησιμοποιούν συχνά κώδικα HTML σε διάφορα στάδια και κάθε φορά χρειάζεται να γράψουν μερικές γραμμές για ένα συγκεκριμένο σκοπό. Ωστόσο ο επιθυμητός HTML editor ή η εφαρμογή τους μπορεί να μην είναι πάντα διαθέσιμες από άλλους υπολογιστές. Οι Online HTML συντάκτες έρχονται για να ξεπεράσουμε αυτά τα προβλήματα. Ρίξτε μια ματιά παρακάτω και βρείτε μερικούς από τους πιο χρήσιμους HTML editors. Απολαύστε τους! Online HTML Editor (v3.0.5) Lissa’s HTML Editor Live Editor HTML Instant Online HTML Editor Quackit HTML Editor Real Time Editor AmyEditor Tinymce Editor Isdntek Editor HTML Editor Square Free Free Online WYSIWYG HTML Editor HTML.am Editor
  2. Anastasis
    Τα CSS (Cascading Style Sheets), στην κατασκευή ιστοσελίδων, είναι ηλεκτρονικά έγγραφα με ένα σύνολο κανόνων για την μορφοποίηση μιας ιστοσελίδας. Ενδεικτικά, μπορεί να χρησιμοποιηθεί για να διαμορφώσει: – Τα χρώματα και το μέγεθος διαφόρων στοιχείων της ιστοσελίδας – Την συμπεριφορά τους σε διάφορες ενέργειες – Το περιεχόμενο τον τρόπο που θέλουμε. H CSS είναι μια γλώσσα υπολογιστή προορισμένη να αναπτύσσει στιλιστικά μια ιστοσελίδα δηλαδή να διαμορφώνει περισσότερα χαρακτηριστικά, χρώματα, στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την html. Για μια όμορφη και καλοσχεδιασμένη ιστοσελίδα η χρήση της CSS κρίνεται ως απαραίτητη. Οι γλώσσες του web HTML (HyperText Markup Language): Περιγράφει το περιεχόμενο. CSS (Cascading StyleSheets): Περιγράφει την μορφοποίηση. Περιεχόμενο: Δεν περιγράφει εμφάνιση αλλά σημασία. (Τίτλος, Λίστα, Κείμενο, Εικόνα, Πίνακας) Μορφοποίηση: Δείχνει το περιεχόμενο με σωστό τρόπο. (Χρώματα, Θέση, Πλαίσια, Γραμμές, Στοίχιση, Φόντο, Μέγεθος) Για να μορφοποιούμε την σελίδα μας είναι προτιμότερο να χρησιμοποιούμε CSS και όχι html. Πριν προχωρήσουμε στην CSS είναι απαραίτητο να έχουμε μια βασική γνώση της html. Πλεονεκτήματα της CSS – Λόγοι που χρησιμοποιούμε CSS. 1) Ταχύτητα 2) Καλύτερη διαχείριση του κώδικα 3) Προσβασιμότητα 4) Πιο γρήγορο redesign στην ιστοσελίδα μας
  3. Anastasis
    Στην ενότητα αυτή όπως σας είχαμε πει θα δούμε τους τρόπους ενσωμάτωσης της γλώσσας CSS στο αρχείο HTML μας. Υπάρχουν 3 τρόποι για να δώσουμε στυλ στην σελίδα μας. 1) ορισμός CSS μέσα στις ετικέτες (tags) της html. 2) ορισμός CSS μέσα στην σελίδα (internal style sheet) 3) ορισμός CSS σε εξωτερικό αρχείο (external style sheet) 1) Η εφαρμογή μπορεί να γίνει απευθείας μέσα στην ετικέτα της html μας. ? 1 <p style=“color: purple”>Hello!</p> Όμως με τη συγκεκριμένη μέθοδο χάνουμε μια βασική ευκολία που μας δίνει η γλώσσα CSS, δηλαδή την εύκολη διαχείριση των στυλ στις σελίδες μας. Στην περίπτωση αυτή το CSS εφαρμόζετε μόνο στην ετικέτα και πουθενά αλλού. Δεν προτείνουμε να χρησιμοποιείτε αυτό τον τρόπο εφόσον ξέρετε ότι το CSS θα το ξαναχρησιμοποιήσετε σε άλλα μέρη του site σας. 2) Εσωτερική φόρτωση CSS. Μέσα στο head τοποθετούμε την ετικέτα <style type=”text/css”>. Στο CSS γράφουμε όπως βλέπουμε παρακάτω. ? 1 2 3 4 5 6 7 8 <style type="text/css"> p { color: white; } a { color: red; } </style> 3)Εξωτερική φόρτωση αρχείου CSS (προτεινόμενος τρόπος) Με αυτή την μέθοδο έχουμε την δυνατότητα να χρησιμοποιήσουμε όσες φορές θέλουμε το αρχείο CSS έτσι ώστε να μορφοποιήσουμε τον κώδικα της html. Εδώ το αρχείο μας βρίσκετε σε ξεχωριστό αρχείο .css μέσα στο <head>. ? 1 2 3 4 <link rel="stylesheet“ type="text/css“ href=“style.css" /> Με αυτόν τον τρόπο μπορούμε να εισάγουμε ένα αρχείο .css μέσα σε όσες σελίδες html θέλουμε. Είναι εφικτό να δώσουμε το ίδιο στυλ σε παραπάνω από 2 σελίδες html στο ίδιο site. Όπως βλέπουμε είναι προτιμότερο να χρησιμοποιήσουμε τον τελευταίο τρόπο που μάθαμε διότι: – το css γράφετε σε εξωτερικό αρχείο και ετσι μπορούμε να το χρησιμοποιήσουμε σε πολλά μέρη του site μας εξοικονομώντας χρόνο. – έχουμε πιο ευανάγνωστο κώδικα και “καθαρότερο” διότι δεν περιέχετε κώδικας CSS μέσα στο head της html. O καθαρότερος κώδικας είναι πιο εύκολα διαχειρίσιμος για τον προγραμματιστή. – τέλος, γνωρίζουμε το εξωτερικό αρχείο css αποθηκεύετε στην cache του χρήστη στον browser. O browser έχει ως αποτέλεσμα να διαβάσει πιο γρήγορα το αρχείο CSS από την cache, μειώνοντας έτσι τον όγκο δεδομένων που κατεβάζει από τον server που φιλοξένει την σελίδα μας.
  4. Anastasis
    Άπλετο φως στα DOM αντικείμενα σας με το Photon! Αν ψάχνετε έναν τρόπο για να προσθέσετε κάποια εφέ φωτισμού στα DOM στοιχεία σας σε 3D και έπειτα η JavaScript βιβλιοθήκη του Tom Giannatassio θα μπορούσε απλώς να είναι το εργαλείο που ψάχνετε: Photon CSS 3D Lighting Engine. Αυτή η ισχυρή μηχανή φωτισμού σας επιτρέπει να ορίσετε πηγές φωτός για μια σκηνή και να δείτε πώς συμπεριφέρονται τα αντικείμενα, σύμφωνα με τις πηγές φωτός κάτι που είναι αρκετά εντυπωσιακό. Το Photon χρησιμοποιεί το αντικείμενο WebKitCSSMatrix για να δημιουργήσει το αποτέλεσμα, γι ‘αυτό και παρέχει CSS animation. Είναι πολύ εύκολο στη χρήση – απλά ορίσετε μια φωτεινή πηγή, ένα στοιχείο DOM που λειτουργεί ως επιφάνεια για αντανάκλαση και είστε έτοιμοι για render. Μπορείτε να ρυθμίσετε όσα face, φώτα και συνδυασμούς θέλετε. Προειδοποίηση όμως, μπορεί να καταναλώνει αρκετούς πόρους και γι ‘αυτό μπορεί να καταπονήσει τον επεξεργαστή σε παλαιότερους υπολογιστές. Βεβαιωθείτε ότι δεν το παρακάνετε. Είναι επίσης δυνατόν να καθοριστούν τα αντικείμενα που πρέπει να φωτίζονται ένα προς ένα ή ως ομάδα. Μπορείτε να προσαρμόσετε το αποτέλεσμα με τον καθορισμό της μέγιστης χρήσης μαύρου + άσπρου. Επιπλέον, μπορεί να οριστεί η γωνία του φωτός και να αλλάξει οποτεδήποτε από τις παρεχόμενες λειτουργίες. Υπάρχουν τρία βασικά σενάρια με το Photon: Photon.Light (ένα σημείο σε 3D χώρο από τον οποίο ανάβουν τα faces) Photon.Face (ένα στοιχείο DOM για σκιά με ένα συγκεκριμένο φως) Render (δένει ένα φως και το face μαζί)
  5. Anastasis
    Το MUELLER είναι ένα modular grid system για responsive/adaptive και non–responsive layouts, βασισμένο στο Compass. Έχετε πλήρη έλεγχο πάνω στο πλάτος της στήλης, το gutter, το baseline grid και τα media–queries. Μπορείτε να πάρετε το grid_system αρχείο, το οποίο είναι και αυτό που ορίζει το σύστημα. Όλα τα άλλα μέρη (μέσα ενημέρωσης, σχεδιαγράμματα, κλάσματα, πρότυπα) είναι μόνο παραδείγματα για το πώς να εργαστείτε με το MUELLER. Έχει αδεια BSD. Απαιτήσεις: – Download Link: http://www.muellergridsystem.com/ License: BSD License
  6. Anastasis
    Όλοι γνωρίζουν ότι μια γλώσσα κωδικοποίησης μπορεί να είναι δύσκολο να την μάθεις. Το καλό είναι ότι υπάρχουν άνθρωποι που έρχονται με διάφορους πόρους που θα σας βοηθήσουν στο δρόμο της ανάπτυξης. Λίγοι από αυτούς τους πόρους είναι τέτοιοι ώστε να μην χρειάζεται να μάθετε το σύνολο της CSS ή CSS3 κωδικοποίησης. Επιπλέον, κάνουν τη δουλειά σας πολύ εύκολη. Στην συγκεκριμένη λίστα θα βρείτε περίπου σαράντα πέντε δωρεάν online generators για τους σχεδιαστές. Ελπίζουμε ότι ο κατάλογος αυτός θα αποδειχτεί χρήσιμος. Απολαύστε τον. CSS3GEN Χρησιμοποιήστε αυτό το εργαλείο, αν θέλετε να δημιουργήσετε CSS3 snippets για box shadows, text shadows και border radius.. Αυτό μπορεί να σας εξοικονομήσει αρκετό χρόνο και είναι πολύ βολικό. STYLIE Θέλετε να δημιουργήσετε animations σε CSS3 εύκολα; Δοκιμάστε το. CSS2LESS Όπως υποδηλώνει το όνομα, μπορείτε να χρησιμοποιήσετε το συγκεκριμένο εργαλείο για τη μετατροπή από CSS σε LESS. Είναι εύκολο και απλό. Το μόνο που έχετε να κάνετε είναι να αντιγράψετε και να επικολλήσετε. SPRITEPAD θα σας βοηθήσει να δημιουργήσετε sprites, όπως υποδηλώνει το όνομα χρησιμοποιώντας μια drag and drop πλατφόρμα. Μπορείτε να έχετε τα sprites άμεσα διαθέσιμα ως PNG + CSS χωρίς την ανάγκη να πάτε στο Photoshop και χωρίς τα προβλήματα της εξαγωγής. ON/OFF FLIPSWITCH Χρησιμοποιώντας το συγκεκριμένο εργαλείο μπορείτε εύκολα και αποτελεσματικά να δημιουργήσετε on /off διακόπτη χρησιμοποιώντας CSS3. Μην ανησυχείτε δεν χρειάζεται να ξέρετε πώς η γλώσσα λειτουργεί. Μπορείτε επίσης να προσθέσετε animated transitions. STRIPEMANIA Αυτό είναι ένα online εργαλείο βασισμένο στο web 2.0. Μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε τέλεια διαγώνιες ρίγες στα σχέδιά σας. Μπορείτε να επιλέξετε το μέγεθος και να ρυθμίστε την απόσταση μεταξύ των δύο λωρίδων, να προσθέσετε χρώμα και gradient effects στην κορυφή. COLOROTATE Πρόκειται για ένα εργαλείο που μπορείτε να δημιουργήσετε χρώματα. Το μόνο που έχετε να κάνετε είναι μερικά κλικ και είναι σε θέση να αναλύσει τα χρώματα και τη σύνθεση τους, μπορείτε να εξάγετε και να προσαρμόζει τα χρώματα ανάλογα με τις ανάγκες σας, ακόμα και να τις μοιραστείτε. TABS GENERATOR Αν ψάχνετε για έναν εύκολο τρόπο να δημιουργήσετε καρτέλες, το tabs generator είναι για εσάς. Μπορείτε να επιλέξετε το μέγεθος, το ύψος και το πλάτος, τα χρώματα, γωνίες, ακόμη και τη στρογγυλοποίηση τους, το χρώμα των συνόρων να συμπληρώσετε το χρώμα και να δημιουργήσετε την καρτέλα. Χρησιμοποιήστε τον κώδικα στο CSS σας. CSS3 GRADIENT GENERATOR V2.0 Είστε σε θέση να δημιουργήσετε κλίσεις με το συγκεκριμένο εργαλείο. Είναι εφοδιασμένο με ένα εύκολο στη χρήση γραφικό περιβάλλον και θα πρέπει να μπορείτε να δείτε την κλίση σας σε πραγματικό χρόνο CSS3 GENERATOR Μπορείτε να χρησιμοποιήσετε αυτόν τον Generator για μινιμαλιστικό σχεδιασμό CSS3. Επίσης, λειτουργεί σε παλαιότερα προγράμματα περιήγησης, έτσι δεν χρειάζεται να ανησυχείτε για την αναβάθμιση. STRIPED BACKGROUNDS Αυτό είναι ένα άλλο εργαλείο για την κατασκευή stripes. Αν θέλετε ρίγες σε φόντο, δεν χρειάζεται να κοιτάξετε αλλού. Δημιουργεί επίσης striped backgrounds BGPATTERNS Αν ψάχνετε ένα εργαλείο για να δημιουργήσετε γρήγορα patterns για το background σας, τότε αυτό είναι για σας. Είναι εύκολο στη χρήση και πολύ γρήγορο. STRIPE GENERATOR 2.0 Όπως υποδηλώνει το όνομα, είναι ένα ακόμα εργαλείο για τη δημιουργία stripes. Μπορείτε ακόμη να χρησιμοποιήσετε το αρχείο που δημιουργείται στο Photoshop αν θέλετε. Δημιουργήστε stripes με τον τρόπο που εσείς θέλετε. TYPETESTER Μπορείτε να εμφανίσετε πολλές γραμματοσειρές ταυτόχρονα στην οθόνη σας χρησιμοποιώντας αυτό το εργαλείο που σας επιτρέπει να κάνετε μια καθαρή και σαφές σύγκριση. Αρκετά βολικό. FAARY Μπορείτε να χρησιμοποιήσετε το Faary για να δημιουργήσετε απεριόριστα forms μέσα σε λίγα λεπτά. PATTERNIFY Πρόκριτε για ένα pattern generating tool. Το καλύτερο κομμάτι είναι ότι δεν χρειάζεστε αρχείο εικόνας. Ο κωδικός είναι όλα όσα θα χρειαστείτε. COLOR SCHEME DESIGNER Το συγκεκριμένο εργαλείο θα σας βοηθήσει να καταλάβετε τους συνδυασμούς χρωμάτων. COPASO Εάν βρίσκεστε σε σύγχυση σχετικά με τα χρώματα το COPASO θα σας βοηθήσει. FRESHGENERATOR Μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο για να δημιουργήσετε γραφικά στοιχεία. Μπορείτε να δημιουργήσετε κουτιά και να κάνετε πολλές αλλαγές, όπως μπορεί να δει κανείς στην παραπάνω εικόνα. FAVICON Αυτό το εργαλείο είναι για τους σκοπούς που υποδηλώνει το όνομά του. Μπορείτε να δημιουργήσετε ή να κατεβάστε από μια βάση δεδομένων πολλά διαφορετικά εικονίδια favicon.ico. Αυτά είναι τα εικονίδια που εμφανίζονται στη γραμμή διευθύνσεων του προγράμματος περιήγησης. CSS3 BUTTON GENERATOR Το συγκεκριμένο εργαλείο μπορεί κάλλιστα να χρησιμοποιηθεί για να δημιουργήσετε κουμπιά ακριβώς με τον τρόπο που θέλετε με διάφορες ρυθμίσεις προσαρμογής. ULTIMATE CSS GRADIENT GENERATOR Το εργαλείο προέρχεται από το ColorZilla και μπορείτε να το χρησιμοποιήσετε για τη δημιουργία CSS gradients καθώς επίσης και να τις επεξεργαστείτε. BORDER IMAGE GENERATOR Θέλετε να πετύχετε τη δίπλωση του κειμένου σας σε μια εικόνα η μοτίβο σαν boarder; Λοιπόν, το συγκεκριμένο εργαλείο θα σας βοηθήσει να πετύχετε ακριβώς αυτό. DOTTER Πρόκειται για ένα web 2.0 εργαλείο που θα σας βοηθήσει να δημιουργήσετε backgrounds με dots. CSS TYPE SET Είναι ένα εργαλείο τυπογραφίας. Μπορείτε να το χρησιμοποιήσετε για να ελέγξετε το στυλ του περιεχομένου σας. Μπορείτε να συγκρίνετε και να δείτε τι φαίνεται καλό και τι όχι. PHP FORM Έχετε προβλήματα στο να δημιουργήσετε forms ή δεν έχετε αρκετό χρόνο για να γράψω ολόκληρο τον κώδικα Χρησιμοποιήστε αυτό το εργαλείο για να σας βοηθήσει να δημιουργήσετε μια φόρμα HTML σε λίγα λεπτά. CSS TRICKS Χρησιμοποιήστε αυτό το εργαλείο για να δημιουργήσετε κουμπιά και να τους δώσετε rounded effect που ταιριάζουν στις προτιμήσεις σας. Προσθέστε χρώματα και κάντε αλλαγή του χρώματος του κειμένου και πολλά άλλα customizations. AJAX LOADING GIF GENERATOR Αν θέλετε να δημιουργήσετε το εικονίδιο του AJAX loader, τότε μην ψάχνετε περαιτέρω. Αυτό το εργαλείο είναι τέλειο. COLOR COMBOS Ποιοι συνδυασμοί χρωμάτων είναι οι καλύτεροι για την ιστοσελίδα σας; Τοποθετήστε πολλά χρώματα μαζί και ελέγξτε τα το για τον εαυτό σας. COLOR PALETTE Επιλέξτε ένα βασικό χρώμα και το συγκεκριμένο εργαλείο θα δημιουργήσει 10 διαφορετικές αποχρώσεις του χρώματος για σας. Είναι ένας εύκολος τρόπος για να δημιουργήσετε μια ωραία παλέτα εάν εργάζεστε με παρόμοια χρώματα. CREATE GRAPH Το φοβερό στα διαγράμματα είναι ότι έχουν την οπτική επίδραση που οι λέξεις δεν μπορούν να έχουν. Εξάλλου, προσθέτουν αυθεντικότητα. Τα Γραφήματα χρησιμοποιούνται συχνά, όταν πρόκειται για στατιστικές και πολλά άλλα πράγματα. Εάν θέλετε να δημιουργήσετε ένα για την ιστοσελίδα σας, χρησιμοποιήστε το εργαλείο αυτό. CSS LAYOUT GENERATOR Χρησιμοποιήστε αυτό το εργαλείο το οποίο θα σας βοηθήσει να σχεδιάσετε τη δομή της ιστοσελίδας σας. Χρησιμοποιεί HTML και CSS. Είναι πολύ προσαρμόσιμο. Μπορείτε να δημιουργήσετε διαγράμματα με έως και τρεις στήλες όπως κεφαλίδες και υποσέλιδα. Δεν θα βρείτε ευκολότερο από αυτό. EMAIL ICON AND SIGNATURE GENERATOR Κάνει ακριβώς αυτό που υποδηλώνει το όνομα πάρα πολύ εύκολα. Θα τα έχετε όλα έτοιμα στο άψε σβήσε. GRADIENT MAKER Χρησιμοποιήστε αυτόν τον δικτυακό τόπο, προκειμένου να δημιουργήσετε gradients. GRADIENT IMAGE MAKER Ένα ακόμη εργαλείο για gradients, αλλά σε σύγκριση με τα άλλα αυτό προσφέρει πολύ μεγαλύτερη προσαρμογή. Μπορείτε επίσης να κάνετε ρίγες και να προσθέσετε gradient effect σε 3D. COLORSCHEMER ONLINE V2 Εργαλείο για να σας βοηθήσει να καταλάβετε τους συνδυασμούς χρωμάτων σας. VARIABLE GRID SYSTEM Χρησιμοποιήστε αυτό το εργαλείο για να δημιουργήσετε το CSS grid του site σας. Το παραγόμενο αρχείο είναι βασισμένο στο 960 Grid System. CSS3 GENERATOR V1.6 Χρησιμοποιήστε το για να δημιουργήσετε τα μικρότερα συστατικά της ιστοσελίδας σας. Κυρίως έχει να κάνει με boxes, κείμενο και gradients. CSS3.0 MAKER Εάν είστε πρόθυμοι να το πειραματιστείτε με τις ιδιότητες CSS σας θέλετε να μάθετε τα αποτελέσματα, αυτό το εργαλείο είναι για εσάς. Είσαστε σε θέση να δημιουργήσετε ένα απλό στυλ CSS χρησιμοποιώντας το. BGMAKER Εργαλείο για τη δημιουργία backgrounds. Μπορείτε να χρησιμοποιήσετε pixel art, αν είστε εξοικειωμένοι. Μπορείτε να δημιουργήσετε ένα tiled background και στη συνέχεια να κατεβάσετε το αρχείο για να το χρησιμοποιήσετε περαιτέρω. COLOR SCHEME GENERATOR Κάντε Mix και ταιριάξτε color schemes. COLOR PALETTE GENERATOR Το μόνο που χρειάζεται να κάνετε είναι να ανεβάσετε το background και θα δημιουργήσει την κατάλληλη παλέτα για σας. YAML BUILDER Εδώ μπορείτε να δείτε πως αναπτύχθηκε από το YAML, διάταξη βασισμένη σε CSS. BLUEPRINT GRID CSS GENERATOR Αυτό το εργαλείο θα σας βοηθήσει να παράγετε περισσότερο ευέλικτες εκδόσεις των grid.css και compressed.css, Blueprint και αρχεία grid.png. Προτιμάτε 8, 10,16 ή 24 στήλες στο σχεδιασμό σας; αυτή η γεννήτρια σας δίνει τη δυνατότητα μέσω Blueprint ». WORDPRESS THEME GENERATOR Η πιο σημαντική πτυχή του blog σας, είναι το theme. Αυτή η γεννήτρια θα δημιουργήσει το δικό σας προσωπικό WordPress θέμα. Δεν χρειάζεται να γνωρίζετε HTML, JavaScript, CSS και PHP για να χρησιμοποιήσετε αυτό το εργαλείο.
  7. Anastasis
    Το cgSceneGraph είναι ένα object-oriented και εύκολο στη χρήση animation JavaScript framework που είναι χτισμένο με HTML5 canvas Έχει δημιουργηθεί για επαγγελματικές εφαρμογές και παιχνίδια, είναι cross-browser και έχει πολλά ενσωματωμένα nodes, όπως εικόνες, κείμενο, κουμπιά, σχήματα, κλπ. Το framework είναι σε θέση να διαχειρίζεται πολύπλοκες σκηνές, υποστηρίζει ποντίκι αφής και events, έχει χαρακτηριστικά για draggable + resizable και έρχεται με ένα σύστημα collision + particle system. Υπάρχει επίσης υποστήριξη για asynchronous image loading, color manipulation και πολλά άλλα. Compatibility: Όλοι οι Browsers Website: http://gwennaelbuchet.github.com/cgSceneGraph/ Demo: http://gwennaelbuchet.github.com/cgSceneGraph/exampl… Download: https://github.com/GwennaelBuchet/cgSceneGraph
  8. Anastasis
    Το Groundwork είναι ένα πλήρως responsive HTML5, CSS και Javascript toolkit. Χρησιμοποιώντας το Groundwork, μπορείτε να δημιουργήσετε γρήγορα εφαρμογές web που λειτουργούν σχεδόν σε οποιαδήποτε συσκευή. Το Groundwork έχει χτιστεί από το μηδέν με το απίστευτα ισχυρό CSS preprocessor, Sass. Με ένα απίστευτα ευέλικτο, nestable, fluid grid system, το Groundwork υποστηρίζει columns σε οποιοδήποτε κλασματικό ποσό από halves σε twelths. Το Groundwork είναι open-source, φιλοξενείται στο Github και 100% δωρεάν. Απαιτήσεις: Sass & Compass Demo: http://groundwork.sidereel.com/ Άδεια: MIT License
  9. Anastasis
    Το Css3 μας παρέχει πολλές επιλογές στυλ για να δημιουργήσουμε καλή εμφάνιση στοιχείων. To Fancy Input, ένα jQuery plugin, δεν επικεντρώνεται στο τμήμα styling αλλά κάνει τα πεδία ελκυστικά (και διασκεδαστικά στη χρήση) με την προσθήκη CSS3-powered αποτελέσματων. Το plugin κρύβει το πεδίο εισαγωγής, τοποθετεί ένα span στοιχείο που περιέχει το χαρακτήρα που πατήσαμε και προσθέτει CSS3 μεταβάσεις σε κάθε στοιχείο (γράμμα). Υπάρχουν πολλά ενσωματωμένα εφέ και λειτουργεί τόσο με input + textarea fields. Απαιτήσεις: jQuery Συμβατότητα: Όλα τα σύγχρονα προγράμματα περιήγησης Website: http://dropthebit.com/demos/fancy_input/fancyInput.html Download: https://github.com/yairEO/fancyInput
  10. Anastasis
    Υπάρχουν πολλοί σχεδιαστές που έχουν αρχίσει να χρησιμοποιούν HTML5 στα έργα τους. Στην προσπάθεια να μάθουν και να τα λειτουργήσουν γρήγορα, πολλοί σχεδιαστές αναζητούν HTML5 frameworks. Τα πλαίσια αυτά είναι πραγματικά χρήσιμα και ένα εξαιρετικό σημείο εκκίνησης για τους αρχάριους. Τα Frameworks αυξάνουν την παραγωγικότητα του σχεδιαστή. Σώζει χρόνο και επίσης πολλές φορές να βελτιώνει τη συνολική εργασία τους. Αυτά τα πλαίσια θα μπορούσαν να χρησιμοποιηθούν για την ανάπτυξη εφαρμογών web ή κινητών εφαρμογών. Μερικά από αυτά έχουν interactive visualization charts και graphs για να σας βοηθήσουν να δημιουργήσετε κάτι πολύ ελκυστικό. Θα μπορούσατε να κάνετε εύκολα πολλά πράγματα. Σε αυτό το post θα δημοσιεύσουμε τα 20 πιο χρήσιμα frameworks HTML5 για web και ανάπτυξη κινητών εφαρμογών. 52 Framework G5 Framework HTML5 Boilerplate HTML5 Bones Baker ebook framework jQuery Mobile Modernizr Lime JS Sproutcore Initializr Kendo UI Reverie Reformed Dojo BackBone.js Less Framework 4 Baseline Sencha Touch Gravity Jo
  11. Anastasis
    Η επιτάχυνση των ιστοσελίδων έχει μια τεράστια επίδραση στην επιτυχία της ιστοσελίδας, καθώς επηρεάζει άμεσα την εμπειρία του χρήστη και τις μηχανές αναζήτησης. Το Browser Diet είναι ένας πολύ καλός οδηγός που απαριθμεί τα βήματα που απαιτούνται για να έχει κάθε φορά η ιστοσελίδα καλύτερη απόδοση front-end. Έχει δημιουργηθεί από μια ομάδα ειδικών που εργάζονται σε μεγάλα έργα, και παρουσιάζει τις “βέλτιστες πρακτικές” σύμφωνα με τις κατηγορίες, όπως HTML, CSS, JS, server, εικόνες και πολλά άλλα. Επίσης, ο οδηγός δεν απαριθμεί μόνο αυτές τις πρακτικές, αλλά και παρουσιάζει το “πώς να τις εφαρμόσετε» στην λεπτομέρεια. Απλά, ένας must-bookmark (και είναι open source). Website: http://browserdiet.com/ Download: https://github.com/zenorocha/browser-diet
  12. Anastasis
    Τα HTML form elements μοιάζουν και συμπεριφέρονται ελαφρώς (ή μερικές φορές περισσότερο) διαφορετικά σε κάθε πρόγραμμα περιήγησης. Για να βρείτε τις διαφορές και να τα ελέγξετε εύκολα, υπάρχει μια ιστοσελίδα: Η Native Form Elements. Ο δικτυακός τόπος κάνει ένα απλό πράγμα. Απαριθμεί όλα τα form elements (συμπεριλαμβανομένων των HTML5 στοιχείων) και των απενεργοποιημένων (disabled)καταστάσεών τους. Έτσι, είναι αρκετό,για να μπορέσετε να τα συγκρίνετε, να ανοίξετε την ιστοσελίδα σε διαφορετικά προγράμματα περιήγησης .
  13. Anastasis
    Το CSSmatic είναι ένα δωρεάν CSS εργαλείο για τους σχεδιαστές ιστοσελίδων. Υπάρχουν τέσσερα χρήσιμα εργαλεία αυτή τη στιγμή. Μπορείτε να χρησιμοποιήσετε τη Γεννήτρια Gradient που υποστηρίζει πολλαπλά χρώματα και διαφάνεια για να πάρετε καταπληκτικά gradients. Με τη χρήση του εργαλείου gradient μπορείτε να δημιουργήσετε ντεγκραντέ με smooth color changing εφέ και διαφάνειες. Το Border Radius είναι εξαιρετικά εύκολο στη χρήση και σας βοηθά να εξοικονομήσετε χρόνο. Αλλάξτε όλα τα επιλεγμένα borders την ίδια στιγμή. Το Noise Texture σας βοηθά να δημιουργήσετε subtle background patterns με “βρώμικα” pixels και θόρυβο. Αλλάξτε το χρώμα και τα values και δείτε τα αποτελέσματα σε πραγματικό χρόνο. Το Box Shadow υποστηρίζει τις αλλαγές Blur radius, αλλάζει το χρώμα και το μέγεθος της σκιάς. Ό, τι χρειάζεστε για να δημιουργήσετε μεγάλες σκιές σε ένα μόνο σημείο. Demo: http://www.cssmatic.com/ Άδεια: Δωρεάν
  14. Anastasis
    Εδώ θα βρείτε μια λίστα με εργαλεία που θα μπορούσαν να ενδιαφέρουν front-end developers. Όπως πάντα, εάν έχετε ένα εργαλείο, ένα βιβλίο ή σενάριο που θα θέλατε να μοιραστείτε, να το προσθέσετε στα σχόλια. CSS Menu Maker Ένα online εργαλείο για τη δημιουργία HTML και CSS για cross-browser μενού. Μερικές καλές επιλογές εδώ, συμπεριλαμβανομένων και ορισμένων animated εκδόσεις με CSS3. Μπορείτε να επεξεργαστείτε τα μενού δεξιά στην περιοχή, και στη συνέχεια να κατεβάσετε τον κώδικα ως ένα αρχείο zip. Pure CSS3 On/Off Flipswitch On / off διακόπτες, που δημιουργούνται με CSS3. Είναι animated, και μπορούν να μιμηθούν τα ίδια είδη που βλέπετε στην iOS, Android και Windows 8. Ο κώδικας έχει φτιαχτεί on the fly και σας επιτρέπει να δοκιμάσετε το αποτέλεσμα και να το προσαρμόσετε στις δικές σας ανάγκες. CSS3 Multi Column Μας αρέσουν εργαλεία όπως αυτό. Προσπαθεί να κάνει ένα πράγμα καλά. Σε αυτήν την περίπτωση, είναι μια CSS3 γεννήτρια για multi-columns. Και τα πεδία για την προσαρμογή είναι εύχρηστα, και εύκολα να τα διαβάσει και να τα χρησιμοποιήσει κάποιος. simpl Η ιστοσελίδα αυτή έχει ως στόχο να παρέχει τα απλούστερα δυνατά παραδείγματα HTML, CSS και JavaScript. Αυτό είναι πολύ καλό για αρχάριους και ακόμα πιο έμπειρους προγραμματιστές που απλά ψάχνουν για απλά παραδείγματα των διαφόρων front-end χαρακτηριστικών. Img to CSS Με την πρώτη ματιά, αυτό μοιάζει με ένα άχρηστο εργαλείο. Μετατρέπει μια εικόνα σε καθαρή CSS και ο κώδικας που δημιουργείται είναι τραγικός. Αλλά μπορεί να προωθηθεί για χρήση σε πελάτες ηλεκτρονικού ταχυδρομείου, για την πρόληψη εικόνων από το να τις μπλοκάρουν, το οποίο ακούγεται πολύτιμο στην περίπτωση αυτής της χρήσης για ορισμένους. Pageguide.js Ένα script που σας επιτρέπει να προσθέσετε ένα διαδραστικό οδηγό σελίδας στα στοιχεία στην ιστοσελίδα ή την εφαρμογή σας. Τα στοιχεία που δημιούργησατε με τον οδηγό μπορείτε να τα κάνετε κλικ για να πάρετε πληροφορίες σχετικά με το επιλεγμένο αντικείμενο. Φαίνεται καλό για την παροχή μιας ξενάγησης στους χρήστες της λειτουργικότητας app, χωρίς να γράψετε τα πάντα από το μηδέν. The Toolbox Τέλος, αν θέλετε περισσότερα εργαλεία, αυτό το site είναι μια αποθήκη σελίδων εφαρμογών και κώδικα, κατηγοριοποιημένα.
  15. Anastasis
    Όλοι γνωρίζουμε ότι η τεχνολογία εξελίσσεται ραγδαία, και τα προγράμματα περιήγησης στο 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, χωρίς να αντιμετωπίζει πολλές δυσκολίες.
  16. Anastasis
    Πολλοί σχεδιαστές ιστοσελίδων και προγραμματιστές χρησιμοποιούν ιστοσελίδες διαμοιρασμού κώδικα, όπως η jsFiddle ή η Codepen. Το Editr είναι ένα απλό και αυτο-φιλοξενούμενο app (που δεν χρησιμοποιεί server-side κώδικα) για να δημιουργήσει ένα παρόμοιο περιβάλλον εργασίας για την επεξεργασία / βελτίωση και το διαμοιρασμό κάθε HTML-CSS-JS έργων. Ο διαμοιρασμός μπορεί να γίνει απλά με την ενσωμάτωση ενός instance (αυτό γίνεται με jQuery) σε οποιαδήποτε ιστοσελίδα. Η εφαρμογή χρησιμοποιεί τον Ace Editor που είναι εύκολος και προσφέρει εξαιρετική εμπειρία κατά την επεξεργασία κώδικα. Απαιτήσεις: jQuery Website: http://idered.pl/editr/ Download: http://git.io/editr
  17. Anastasis
    Το Transit είναι ένα super-smooth CSS transitions & transformations για την jQuery. Μπορείτε να κάνετε τη μετάβαση σε οποιαδήποτε ιδιότητα CSS. Θα συμβεί πολύ πιο ομαλά από ό, τι εάν επρόκειτο να χρησιμοποιείτε το default .animate() jQuery. Μπορείτε εύκολα να κάνετε translate, rotate, scale, skew κ.λπ. Το Transit “υποβαθμίζει” τα παλαιότερα προγράμματα περιήγησης με απλά να μην κάνει τα transformations (περιστροφή, κλίμακα, κτλ), ενώ εξακολουθούν να κάνουν standard CSS (αδιαφάνεια, marginLeft, κλπ) χωρίς καμία κίνηση. Καθυστερήσεις και διάρκειες θα αγνοηθούν. Έχει εκδοθεί υπό άδεια χρήσης του MIT. Απαιτήσεις: jQuery Framework Demo: http://ricostacruz.com/jquery.transit/ Άδεια: MIT License
  18. Anastasis
    Χρησιμοποιούμε ετικέτες σε πολλά μέρη του web design, όπως την παροχή πληροφοριών σχετικά με τις εικόνες, τα στοιχεία φόρμας, βίντεο κτλ.. Το Label.css είναι ένα απλό αλλά χρήσιμο σύνολο CSS κανόνων που θα παρέχουν μια συνολική χρήση του global label. Κάθε ετικέτα μπορεί να συνδεθεί με οποιοδήποτε στοιχείο, τοποθετημένο όπως θέλουμε (δεξιά, αριστερά, πάνω, κάτω, μέσα, έξω) και μπορεί να κινείται με float ή fade effects. Λειτουργεί με την προσθήκη pre-defined classes για τα στοιχεία και το περιεχόμενο των ετικετών είναι αποθηκευμένα μέσα στα data-label attributes του κάθε στοιχείου. Απλά, είναι μια καλή προσθήκη σε οποιοδήποτε stylesheet ή CSS framework. Συμβατότητα: Όλες οι μεγάλες μηχανές αναζήτησης Website: http://usablica.github.io/label.css/ Download: https://github.com/usablica/label.css
  19. Anastasis
    Το least.js είναι ένα random και responsive HTML 5, CSS3 γκαλερί με lazyLoad. Η εγκατάσταση και χρήση του είναι απλή, και το τελικό αποτέλεσμα είναι αρκετά όμορφο. Website και Demo
  20. Anastasis
    Η HTML5 Up! είναι μια ιστοσελίδα που δημιουργεί και μοιράζεται πολύ καλά και δωρεάν HTML5, CSS3 πρότυπα. Όλα τα πρότυπα είναι responsive (χρησιμοποιεί Skel.js) και είναι συμβατό με όλα τα προγράμματα περιήγησης. Υπάρχουν ήδη 10 + πρότυπα, καθώς νέα προστίθενται συχνά και μπορούν να χρησιμοποιηθούν ελεύθερα υπό την άδεια CCA τόσο για προσωπικά όσο και για εμπορικά έργα. Website: http://html5up.net/
  21. Anastasis
    Είναι τόσο καλό να βλέπουμε νέα και ποιοτικά frameworks να εισάγονται τακτικά στην web κοινότητα σχεδιασμού / ανάπτυξης. Το Pure είναι ένα φρέσκο framework που έχει δημιουργηθεί από την Yahoo!. Χρησιμοποιεί το Normalize.CSS και δεν χρησιμοποιεί καθόλου JavaScript, αλλά μόνο HTML, CSS. Το πλαίσιο είναι χτισμένο με responsive layouts και έχει στυλ για typography, grids, forms, buttons, tables and navigation. Το Markup που χρησιμοποιείται είναι πολύ απλό και το όλο πλαίσιο είναι αρκετά ελαφρύ (5.7kb minified και gzipped). Επίσης, είναι modular και στυλ για το κάθε module μπορεί να χρησιμοποιηθεί ξεχωριστά. Απαιτήσεις: Normalize.CSS Συμβατότητα: Όλοι οι Browsers Website: http://purecss.io/ Download: https://github.com/yui/pure/
  22. Anastasis
    Ένα πράγμα που πρέπει να αναλογιστεί κανείς, είναι πόσες ώρες σπαταλάμε την ημέρα για να πετύχουμε ομαλή και responsive συμπεριφορά σε ότι σχεδιάζουμε. Προσωπικά συνηθίζω να το κάνω με javascript και jquery, απλά γιατί έτσι εξασφαλίζω την καλύτερη συμβατότητα! Ουσιαστικά αναθέτω σε αυτούς που γράφουν το jquery, την επιπλέον δουλειά της συμβατότητας! Αλλά ειλικρινά έχω κουραστεί να μου μιλάνε για αιωνόβιους browsers, επειδή κάποιος έχει παραμείνει στα xp γιατί βαριέται ή μετά από 5-6 χρόνια με υπολογιστή στο ελάχιστο δεν έχει μάθει να περνάει ένα νέο λειτουργικό μόνος του. Πάμπολλες φορές έχω πει σε φίλους που δεν μπορούν να πληρώσουν νέο υπολογιστή ή αναβάθμιση και ούτε καινούργια windows, να βάλουν linux. Άλλοι δυσκολεύονται… Άλλοι λένε ότι παίρνω ποσοστά… Θέλω να δουλεύω με καινούργια χαρακτηριστικά! Χαρακτηριστικά και ανέσεις που έχεις στον desktop προγραμματισμό χωρίς να τις έχεις ζητήσεις! Γιατί εννοούνται… Έτσι λοιπόν, καθώς έγγραφα κώδικα αργά χθες το βράδυ… και ξαναείδα ένα σπαστικό! loader να ξανα-πηγαίνει δεξιά, γιατί προφανώς αυτός που τον προσάρμοσε, έχει βαρεθεί να διαβάσει το w3c! Άνοιξα ένα επιπλέον editor, τον brackets (είναι opensource της adobe, έχει πολύ καλό μέλλον), που είναι ελαφρύς και έχει standard χαρακτηριστικό το live reload! Τελικά βρήκα ένα τρόπο, έτσι ώστε να κεντράρω, οποιοδήποτε αντικείμενο με θέση absolute, ακολουθώντας ένα pattern! Κατ’ αρχή πρέπει να ξέρουμε ότι τα αντικείμενα που ταξινομούνται στην οθόνη από το absolute mod, έχουν σχετικό positioning system, που σημαίνει ότι παίρνουν σημείο αναφοράς το κοντινότερο πατρικό αντικείμενο με θέση absolute ή relative και αν αυτό δεν υπάρχει, σημείο αναφοράς είναι το αντικείμενο του document. Οπότε μέρος του pattern είναι να θέτουμε πάντα το πατρικό αντικείμενο που θεωρούμε στόχο ως absolute η relative και να μην υπάρχει ενδιάμεσο πατρικό που να έχει αυτά τα δύο mods. Να έχουμε υπόψη και το box type που χρησιμοποιούμε, το default στους περισσότερους browsers είναι το content-box, που αυτό πάει να πει ότι το border και το padding συμπεριλαμβάνονται στον υπολογισμό, ενώ εάν έχουμε border-box, όχι. Μετά έχουμε απλά ένα μικρό κομμάτι κώδικα css που διαφέρει. Ανάλογα το box-sizing! Παραδείγματα: Παράδειγμα με content-box: /* Parent element .wrapper */ .wrapper { width: 100%; position: relative; padding: 0 calc(50% – 175px); /* Τρικ για κεντράρισμα αντί για margin: 0 auto; Είναι για κεντράρεις κείμενο με μήκος παραγράφου 350px */ box-sizing: content-box; } /* Αντικείμενο για κεντράρισμα .loader */ .loader { height: 75px; width: 75px; position: absolute; left: calc(25% + 37.5px); /* [50%/2 + width/2] */ top: calc(25% + 37.5px); /* [50%/2 + height/2] */ } – Στο content-box η absulte θέση, υπολογίζεται μετά το padding, οπότε το από το padding έχει μείνει το μισό του πραγματικού μήκους, οπότε για να κεντράρουμε θέλουμε το [υπολειπόμενο μήκος] / 2 +το μισό μήκος του στοιχείου (Εδώ μπορεί να μη είναι απόλυτο για όλους όσο αφορά το μισό μήκος του στοιχείου, ωστόσο, έτσι δουλεύει μέχρι στιγμής!). Το 50% αναφέρεται στο μήκος του πατρικού στοιχείου! Ακολούθως είναι και το ύψος! Παράδειγμα με border-box: .wrapper { width: 100%; position: relative; padding: 0 calc(50% – 175px); box-sizing: border-box; } .loader { height: 75px; width: 75px; position: absolute; left: calc(50% – 37.5px); top: calc(50% – 37.5px); } -Εδώ δεν λαμβάνεται υπόψη στον υπολογισμό το padding. Οπότε μπορούμε εύκολα να πούμε 50% μείον το μισό του αντικειμένου loader, που είναι πιο λογικό! Και έχουμε το ίδιο ωραίο αποτέλεσμα! Η υποστήριξη για το calc function είναι αρκετά καλή! Ωστόσο, δεν γλυτώνει κανείς τα javascript fallbacks για production sites! Αλλά καιρός είναι να αρχίσουμε να τα αφήνουμε αυτά πίσω!
  23. Anastasis
    Το Hitch είναι μια ελαφριά βιβλιοθήκη JavaScript που προσθέτει expressive δυνατότητες στα CSS αρχεία. Έχει μερικές από τις δυνατότητες των CSS preprocessors όπως prefixing ή variables, αλλά και κάποια άλλα πράγματα. Η βιβλιοθήκη έρχεται με πολλούς έτοιμους προς χρήση selectors όπως “anyof, allof, has..” και σας επιτρέπει να ορίσετε τυχόν νέους (που ονομάζονται hitches). Αυτά τα hitches είναι απλές λειτουργίες JavaScript και μπορούν να γραφτούν εύκολα (όταν η βιβλιοθήκη έχει περισσότερους χρήστες, θα υπάρξουν πιθανώς πολλά hitches) Το Hitch είναι πολύ καλά τεκμηριωμένο, έχει παραδείγματα και λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης . Συμβατότητα: Όλα τα σύγχρονα προγράμματα περιήγησης Website: http://hitchjs.com/
  24. Anastasis
    Βλέπουμε πολλά εντυπωσιακά CSS3 demos να παρουσιάζονται συχνά: flipping, rotating ή sliding αντικείμενα και άλλα .. To Magic είναι ένα stylesheet που περιλαμβάνει πολλά από αυτά τα CSS εφέ (αναφέρεται επίσης ότι “θα προστεθούν και άλλα”). Τα effects συλλέγονται κάτω από κατηγορίες (magic, perspective, rotate, bling, static, slide) και όλα τα αποτελέσματα είναι αρκετά ελκυστικά. Κάθε ένα από αυτά έχει τις δικές τους classes και ο ευκολότερος τρόπος για να τα χρησιμοποιήσετε είναι με την προσθήκη / αφαίρεση αυτών των κατηγοριών σε στοχευμένα στοιχεία μέσω JavaScript. Απαιτήσεις: δεν υπάρχουν Συμβατότητα: Όλοι οι Browsers Website: http://www.minimamente.com/magic-css3-animations/ Download: https://github.com/miniMAC/magic
  25. Anastasis
    Με τα icon-fonts, κατέστη σαφές ότι, σύντομα, δεν θα μπορούμε να χρησιμοποιούμε εικόνες για εικονίδια. Το Cikonss είναι ένα βήμα πιο πέρα στη χρήση icon, καθώς δεν χρησιμοποιεί γραμματοσειρές, αλλά τα στοιχεία έχουν δημιουργηθεί με καθαρή CSS. Επί του παρόντος, υπάρχουν παραπάνω από 40 είδη στο σύνολο, που είναι responsive-layouts-friendly και λειτουργούν με cross-browser (δεν χρησιμοποιούνται CSS3 στοιχεία). Το set αυτή την στιγμή δεν είναι αρκετά μεγάλο για να χρησιμοποιηθεί σε εφαρμογές web, αλλά αν χρειάζεστε μόνο μερικές από αυτές, γιατί όχι. Και, αν το set συνεχίζει να αυξάνεται, μπορεί να γίνει ένας πολύτιμος πόρος για την κοινότητα web design. Website: http://cikonss.zzapwebdesign.com/ Download: https://github.com/zzap/Cikonss
×