Use the justify-content property to align items along the main axis. Common values include:
To create a flex container, set the display property of an element to flex or inline-flex:
|
1 2 3 |
.container { display: flex; /* or inline-flex */ } |
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that allows you to design flexible and responsive layouts. It provides an efficient way to align, distribute, and space items within a container, even when their sizes are unknown or dynamic.
There are many Javascript fixes for the viewport height units bug in iOS 7 (iPhone & iPad), this article will cover how to resolve this bug with CSS. This particular bug affects the rendering of viewport height units, for example: if you try to make a full viewport height container
Responsive web design (RWD) is an approach whereby a designer creates a web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an over-sized desktop computer monitor, a laptop or devices with small screens such as smartphones and
The main components of Flexbox are:
-webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:
::-webkit-scrollbar the background of the bar itself.::-webkit-scrollbar-button the directional buttons on the scrollbar.::-webkit-scrollbar-track the empty space “below” the progress bar.::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of
A preloader or what some call a loading screen — is the what you see on some sites before the main content of the web page is loaded.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
.page-loader{ position: fixed; z-index: 200; width: 100%; height: 100%; top:0; left:0; background: #fff; display: block; } .page-loader .fa{ font-size: 2.5rem; } .page-loader, .page-loader.visible{ -webkit-transition: 0.6s; -ms-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s; opacity: 1; visibility: visible; } .page-loader.p-hidden{ visibility: hidden; opacity: 0; } .page-loader div{ position: absolute; top:50%; width: 100%; text-align: center; color: #1d1d1d; margin-top: -50px; display: block; } .page-loader div .icon{ display: inline-block; margin-left: -20px; left: 50%; width: 40px; height: 40px; content: ""; background: #1d1d1d; border-radius: 100px; border: 8px solid #fff; border-top-color: rgba(255, 255, 255, 0.58); border-bottom-color: rgba(255, 255, 255, 0.58); } .page-loader div p{ margin-top: 100px; font-size: 14px; color: #555; letter-spacing: 1em; padding-left: 1em; text-transform: uppercase; font-family: 'Roboto', 'Helvetica', sans-serif; font-weight: bold; } .ion-spin, .ion-loading-a, .ion-loading-b, .ion-loading-c, .ion-loading-d, .ion-looping, .ion-refreshing, .ion-ios7-reloading { -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -o-animation: spin 1s infinite linear; animation: spin 1s infinite linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } |
HTML
|
1 2 3 4 5 6 |
<div class="page-loader" id="page-loader"> <div> <div class="icon ion-spin"></div> <p>loading</p> </div> </div> |