2Απρ

Διπλό border σε εικόνα με χρήση CSS.

, 2 Απριλίου 2008 | WEB DESIGN - AUTHORING | 0 Σχόλια

Στα πλαίσια καλύτερης εκμάθησης και συχνότερης χρήσης των CSS το Webdesignblog θα δημοσιεύει άρθρα που θα εξηγούν τους τρόπους να αποφεύγετε επιπλέον γραφικά και γενικότερα πως να εφαρμόζετε καλύτερα στησίματα (layout) με valid και semantic markup στις ιστοσελίδες που σχεδιάζετε.

Η μέθοδος

Με την χρήση CSS θα μπορέσουμε να εμφανίσουμε διπλό border σε εικόνα που επιθυμούμε να προβάλουμε στην ιστοσελίδας μας.

1. Πρώτο βήμα: προσθέτουμε border property 2px με το χρώμα επιλογής μας στο img– tag.

img{
border:2px solid #72a143;
}

2. Δεύτερο βήμα: προσθέτουμε padding property 1px και ορίζουμε ένα κίτρινο χρώμα στο background.

img{
border:2px solid #72a143;
padding:1px;
background:#fffeda5
;
}

Το αποτέλεσμα:

Οπτικά έχουμε «διπλό» border χωρίς την χρήση γραφικών.

double border image
Πηγή πληροφορίας: cssglobe

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Διπλό border σε εικόνα με χρήση CSS. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter