Μήνας: Φεβρουάριος 2018

Δημοσιεύτηκε στισ

Ακορντεόν

Για να δουλέψει ο κώδικας για το εφέ που βλέπετε παραπάνω, χρειάζεται η παρακάτω δομή στην HTML:

<div id="accordion">

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

  <div>
    <div><img src="..." /></div>
  </div>

</div>

Η εξωτερική περιοχή <div id=”accordion”> ορίζει και ονοματίζει την περιοχή του εφέ. Για κάθε εικόνα χρειάζεται ένα στοιχείο <div>, το οποίο περιέχει άλλο ένα <div>, που περιέχει την εικόνα <img>.

Ο κώδικας CSS που δημιουργεί το εφέ είναι ο ακόλουθος:

/* χρήση των κανόνων διάταξης flex */
#accordion {
  display:flex;
  justify-content:space-between;
}

/* αρχική κατάσταση των στοιχείων */
#accordion > div {
  width:25%;
  transition:width 1s;
  overflow:hidden;
  display:flex;
  margin:0 1px;
}
#accordion > div > div {
  height: 100%;
  top:0%;
  transition:height 1s, top 1s;
  display:flex;
  position:relative;
  right:-50%;
}
#accordion img {
  left:-50%;
  position:relative;
  max-width: unset;
}

/* εφέ μεγέθυνσης της περιοχής κάτω από το ποντίκι */
#accordion > div:hover {
  width:75%;
  transition:width 1s;
}
#accordion > div > div:hover {
  height: 104%;
  top:-2%;
  transition:height 1s, top 1s;
}
Δημοσιεύτηκε στισ

Άσκηση στην CSS

  1. Μπείτε στη σελίδα http://www.cssdesk.com/ ή https://codepen.io/pen/
  2. Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα HTML
  3. Γράψτε τους κατάλληλους κανόνες CSS και τροποποιήστε τον κωδικά HTML προσθέτοντας τα χαρακτηριστικά id και class όπου χρειάζεται ώστε να έχετε το αποτέλεσμα που βλέπετε σε αυτό το pdf.
<body>

<h1>Lorem Ipsum</h1>

<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>

<h4>"Δεν υπάρχει κανείς που να αγαπάει τον ίδιο τον πόνο, να τον αναζητά και να θέλει να τον νιώθει, επειδή απλά είναι πόνος..."</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi mauris, vulputate eget vehicula at, mollis et ipsum. Praesent quis tempor enim. Nam vel lorem at nisl lacinia mollis id at orci. Vivamus at ligula at eros ultricies tincidunt ac quis nibh. Morbi condimentum tempus metus, eget facilisis massa pharetra nec. Etiam tristique elit non dui lobortis tincidunt. Proin ipsum nisi, finibus condimentum enim in, varius suscipit eros. Suspendisse scelerisque tempor purus, consectetur laoreet lorem rutrum nec. Praesent a ante sit amet dolor vulputate bibendum ut sit amet massa. Aenean aliquet neque id risus lobortis, eu mollis justo egestas. Maecenas quis augue pharetra, auctor odio nec, iaculis lectus.</p>

<p>Integer ac ex ut orci facilisis iaculis. Suspendisse euismod, dolor sed consectetur pharetra, ante magna hendrerit ipsum, quis semper urna velit et risus. Vivamus nec turpis nec sem commodo porta. Fusce accumsan nisi lacus, in vulputate diam rutrum sed. Pellentesque sodales diam nulla. Nunc at quam et metus mattis sagittis. Etiam nec ultricies magna, in gravida risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<h4>Pic1</h4>
<img src="http://www.prepressure.com/images/lorem-ipsum-cartoon-entities-r-us.png">

<p> In hac habitasse platea dictumst. Maecenas vel mi non dui pulvinar cursus. Maecenas eros ipsum, ullamcorper sit amet elementum non, vulputate auctor lectus. Nulla vel eros ac dolor rhoncus viverra vitae eget orci. Ut felis lacus, mattis molestie elit ut, scelerisque bibendum libero. Nulla nunc eros, congue ac nisi quis, euismod varius nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<p> Cras sed consequat sem, quis ornare risus. Donec condimentum id justo ac pulvinar. Aliquam pellentesque a urna ut faucibus. Curabitur sollicitudin scelerisque egestas. Duis eu justo vitae eros elementum euismod. Nam eu gravida erat. Pellentesque ultricies vitae turpis mollis placerat. Nam vel semper magna. Pellentesque ligula tellus, egestas in purus non, lacinia pellentesque odio. Nullam commodo tincidunt erat ut consectetur. Nulla facilisi. Nulla nec vestibulum lectus. Vestibulum nec vehicula sapien, sit amet interdum risus. Vestibulum venenatis accumsan metus consequat finibus.</p>

<p>Donec blandit ullamcorper malesuada. Duis bibendum tempor risus, ac congue tellus. Aenean in posuere erat, eu sodales sem. Vivamus ornare, orci et mollis consequat, libero elit porttitor nunc, lobortis vulputate ante elit vitae turpis. Sed gravida est ac sapien auctor, at sollicitudin diam egestas. Etiam sit amet velit dolor. Donec a eros dictum, scelerisque metus non, sodales nibh. Aenean et rutrum ligula. Integer et lacus pretium, convallis urna non, viverra dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi lobortis dolor leo, eleifend feugiat nibh placerat non. Nam ligula diam, venenatis at feugiat eget, auctor ac odio. Cras ut tristique nibh, nec rutrum neque. Nunc lorem enim, ultrices eget nisl pharetra, ornare hendrerit lacus. Maecenas volutpat tincidunt purus, vitae sagittis arcu maximus in.</p>

<div>
<ul>
<li>Sed ut metus mollis, efficitur ante quis, commodo lectus.
<li> Integer ut risus a ipsum fermentum rhoncus.
<li>In porttitor ante nec dui interdum, vel faucibus nulla finibus.
<li>Nullam venenatis dui vitae massa euismod dapibus.
</ul>Vivamus ac sem eget nibh tempus ornare ut nec mauris.
</div>

<p> Αυτός είναι ένας απλός <a href="https://el.lipsum.com/">σύνδεσμος</a>, ενώ αυτός ένας άλλος <a href="https://el.lipsum.com/">σύνδεσμος</a> </p>

</body>