Andrew Dorokhov
Hide the first hint option from a select
Example 1:
<select>
<option value="">Choose something</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
/** CSS: **/
select option[value=""] {
display: none;
}
Example 2:
<select>
<option>Choose something</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
/** CSS: **/
select option:not([value]) {
display: none;
}
Aspect ratio for videos
open_in_new How TO - Aspect Ratio .
My solution:
<div class="youtube-video">
<iframe src="..."></iframe>
</div>
.youtube-video {
position: relative;
padding-top: 56.25%;
width: 100%;
margin-bottom: 20px;
iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
}
Buttons with a minimum width
Keep a preferred width, but let longer labels expand:
.btn {
padding: 5px 20px;
min-width: 300px;
text-align: center;
}
Page preloader
<div id="preloader-wrapper">
<div id="preloader">
<div id="loader"></div>
</div>
</div>
$(window).on('load', function () {
$('#preloader-wrapper').fadeOut(400);
});
Example animation: open_in_new codepen.io/WebSonata/pen/bRaONB . More loaders: open_in_new css-loaders.com .