"
Team:Uppsala/marcus.css
From 2014.igem.org
| Line 30: | Line 30: | ||
#grid_container { | #grid_container { | ||
| + | } | ||
| + | |||
| + | /***Now style the containing div that we gave the id 'polaroid'***/ | ||
| + | #polaroid{ | ||
| + | padding:20px 10px; | ||
| + | /*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/ | ||
| + | width:100%; | ||
| + | overflow:hidden; | ||
| + | } | ||
| + | /***Position the figures containing the images and captions***/ | ||
| + | #polaroid figure{ | ||
| + | float:left; /*places the images in a horizontal line*/ | ||
| + | position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/ | ||
| + | width:800px; /*width of the images*/ | ||
| + | margin:10px 20px; /*space between the images*/ | ||
| + | } | ||
| + | |||
| + | #polaroid figure{ | ||
| + | float:left; | ||
| + | position:relative; | ||
| + | width:800px; | ||
| + | margin:10px 20px; | ||
| + | padding: 6px 8px 10px 8px; | ||
| + | -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); | ||
| + | -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); | ||
| + | box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); | ||
| + | background: #eee6d8; | ||
| + | background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); | ||
| + | background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); | ||
| + | background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); | ||
| + | background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); | ||
| + | background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); | ||
| + | -webkit-transform:rotate(-1deg); | ||
| + | -moz-transform: rotate(-1deg); | ||
| + | -o-transform: rotate(-1deg); | ||
| + | -ms-transform: rotate(-1deg); | ||
| + | transform: rotate(-1deg); | ||
| + | -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/ | ||
| + | } | ||
| + | #polaroid figure:nth-child(even) { | ||
| + | -webkit-transform:rotate(2deg); | ||
| + | -moz-transform: rotate(2deg); | ||
| + | -o-transform: rotate(2deg); | ||
| + | -ms-transform: rotate(2deg); | ||
| + | transform: rotate(2deg); | ||
| + | -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/ | ||
| + | -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); | ||
| + | -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); | ||
| + | box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75); | ||
| + | } | ||
| + | |||
| + | #polaroid figcaption{ | ||
| + | text-align: center; | ||
| + | font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */ | ||
| + | font-size:1.3em; | ||
| + | color: #454f40; | ||
| + | letter-spacing: 0.09em; | ||
| + | } | ||
| + | |||
| + | figure::before, figure::after{ | ||
| + | content: ''; /*because there is nothing between the ' ' the content of the pseudo elements will be blank*/ | ||
| + | display: block; | ||
| + | position: absolute; /*for more info on positioning see the Support section below*/ | ||
| + | background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us give the tape some opacity*/ | ||
| + | height: 25px; | ||
| + | } | ||
| + | |||
| + | |||
| + | /*Now position the left strip of tape*/ | ||
| + | figure::before{ | ||
| + | left:-5px; /*distance from the left edge of the box*/ | ||
| + | top: -15px; /*distance from the top of the box*/ | ||
| + | width: 45px; /*length of the strip of tape*/ | ||
| + | /*rotate the tape, in this case 12° anti-clockwise*/ | ||
| + | -webkit-transform: rotate(-12deg); | ||
| + | -moz-transform: rotate(-12deg); | ||
| + | -o-transform: rotate(-12deg); | ||
| + | -ms-transform: rotate(-12deg); | ||
| + | } | ||
| + | /*Finally position the right strip*/ | ||
| + | figure::after { | ||
| + | left: 768px; /*distance from the left edge of the box*/ | ||
| + | top: -10px; /*distance from the top of the box*/ | ||
| + | width: 70px; /*length of the strip of tape*/ | ||
| + | /*rotate the tape, this time 20° clockwise*/ | ||
| + | -webkit-transform: rotate(20deg); | ||
| + | -moz-transform: rotate(20deg); | ||
| + | -o-transform: rotate(20deg); | ||
| + | -ms-transform: rotate(20deg); | ||
} | } | ||
Revision as of 22:23, 16 October 2014
/* --- Killing content --- */
- killing_sds_result {
clear: both;
}
- killing_left {
float: left;
}
- killing_right {
border: 1px solid; float: right;
}
- killing_container {
width: 1100px;; border: 1px solid; height: 500px;
}
- grid_container {
}
/***Now style the containing div that we gave the id 'polaroid'***/
- polaroid{
padding:20px 10px; /*setting a width and adding overflow:hidden will clear the floats we're going to apply to figure*/ width:100%; overflow:hidden; } /***Position the figures containing the images and captions***/
- polaroid figure{
float:left; /*places the images in a horizontal line*/ position:relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/ width:800px; /*width of the images*/ margin:10px 20px; /*space between the images*/ }
- polaroid figure{
float:left; position:relative; width:800px; margin:10px 20px; padding: 6px 8px 10px 8px; -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); background: #eee6d8; background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%); -webkit-transform:rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg); -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/ }
- polaroid figure:nth-child(even) {
-webkit-transform:rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); -webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/ -webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); -moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75); box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75); }
- polaroid figcaption{
text-align: center; font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */ font-size:1.3em; color: #454f40; letter-spacing: 0.09em; }
figure::before, figure::after{ content: ; /*because there is nothing between the ' ' the content of the pseudo elements will be blank*/ display: block; position: absolute; /*for more info on positioning see the Support section below*/ background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us give the tape some opacity*/ height: 25px; }
/*Now position the left strip of tape*/
figure::before{
left:-5px; /*distance from the left edge of the box*/
top: -15px; /*distance from the top of the box*/
width: 45px; /*length of the strip of tape*/
/*rotate the tape, in this case 12° anti-clockwise*/
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
/*Finally position the right strip*/
figure::after {
left: 768px; /*distance from the left edge of the box*/
top: -10px; /*distance from the top of the box*/
width: 70px; /*length of the strip of tape*/
/*rotate the tape, this time 20° clockwise*/
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
}
