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

Προσθέτοντας αόρατο περιεχόμενο

Recommended Posts

 

Εάν τυχόν δούμε την ιστοσελίδα μας χωρίς περιεχόμενο και χωρίς την χρήση του css τότε θα δούμε κάτι σαν το παρακάτω:
Live demo
Αυτό που θα κάνουμε τώρα είναι να δώσουμε τίτλο στα div μας ο οποίος θα είναι αόρατος όταν γίνεται χρήση των css και ορατός όταν δεν χρησιμοποιούνται.
Προσθέτουμε στο css αρχείο μας τα παρακάτω:

κώδικας:
#retouch h2 {
   display: none;
   }
#funny h2 {
   display: none;
   }
#random h2 {
   display: none;
   }
#content1 h2 {
   display: none;
   }
#content2 h2 {
   display: none;
   }
#header h2 {
   display: none;
   }


Όλα τα παραπάνω θα ορίσουν ότι το tag <h2></h2> που θα χρησιμοποιηθεί σε καθένα από αυτά τα div θα είναι ορατό στον κώδικα αλλά ΑΟΡΑΤΟ στην διάταξη της ιστοσελίδας.
Στην html σελίδα μας αρκεί να προθέσουμε τα:

κώδικας:
<h2>Ολοκληρωμένο βοήθημα σχεδίασης με CSS</h2>


μέσα στο div header

κώδικας:
<h2>Χρωματική διόρθωση εικόνας</h2>


αμέσως μόλις ανοίγει το div retouch:

κώδικας:
<div id="retouch"><h2>Χρωματική διόρθωση εικόνας</h2>
  <img src="retouch.gif" alt="Image Retouch" />
  <br />
  Μάθετε πως να διορθώνετε<br />
  χρωματικά μία εικόνα <br />
  με το Photoshop</div>


Με την ίδια λογική προσθέτουμε όλες τις επικεφαλίδες μας

Το τελικό αποτέλεσμα:
Live demo

Το τελικό αποτέλεσμα χωρίς css:
Live demo

Υπάρχουν βέβαια πάρα πολλά πράγματα που μπορούμε να κάνουμε με την χρήση των css και ακόμα περισσότερα με την χρήση της javascript. Στο μέλλον θα δούμε αρκετά από αυτά.
Καλή διασκέδαση.

 

  • Like 1

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  

×