Last active
December 11, 2015 12:48
-
-
Save Marfa/4602601 to your computer and use it in GitHub Desktop.
Demo styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Demo styles */ | |
| body{font:.8em Georgia,"Times New Roman",Serif;background:#fff;color:#777;} | |
| /* Styles for dotted border */ | |
| figure{/* Allows to fit figcaption to figure horizontally */display:table; | |
| margin-bottom:15px;border:1px dashed #ddd} | |
| /* Change color of border on hover */ | |
| figure:hover{border:1px dashed black} | |
| /* Styles for solid border */ | |
| figure.solid{display:table;margin-bottom:15px;border:1px solid #ddd} | |
| /* Change color of border on hover */ | |
| figure.solid:hover{border:1px solid black} | |
| /* Styles for beauty border */ | |
| figure.beauty{display:table;margin-bottom:15px;border:15px solid rgba(0, 0, 0, 0.53);-moz-border-radius:25px 25px / 25px 25px;border-radius:25px 25px / 25px 25px} | |
| /* Figcaption Style */ | |
| figcaption{/* Allows to fit figcaption to figure vertically */display:table-caption; | |
| /* Caption position: top/right/bottom/left */caption-side:bottom; | |
| background-color:grey;color:white;margin-top:5px;text-indent:1em} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <!-- Dotted border figure --> | |
| <figure><img src="http://lorempixel.com/output/technics-q-c-400-400-8.jpg"><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec est vel quam aliquet matt</figcaption></figure> | |
| <!-- Solid border figure --> | |
| <figure class="solid"><img src="http://lorempixel.com/output/technics-q-c-400-400-8.jpg"><figcaption>Lorem ipsum dolor sit amet</figcaption></figure> | |
| <figure class="beauty"><img src="http://lorempixel.com/output/technics-q-c-400-400-8.jpg"><figcaption>Lorem ipsum dolor sit amet</figcaption></figure> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This code makes figcaption fits to figure horizontally and vertically + border hover effects