Tag Archives: css3

How to create skeleton screen

“A skeleton screen is essentially a blank version of a page into which information is gradually loaded.”

Luke Wroblewski

A skeleton screen gives a visual cue that content is loading one after the other into each UI element area. It has been found that skeleton screens play a major role in the perception of users who appear to think that these are not as slow as spinners or progress bars. In fact, many users seem to love them for its look and feel. More power to Skeleton Screens.

The HTML






<div class="skeleton-screen"></div>





The CSS

.skeleton-screen:empty {
    margin: auto;
		width: 500px;
		height: 600px; /* change height to see repeat-y behavior */
    
		background-image:
			radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
			linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 );

		background-repeat: repeat-y;

		background-size:
			100px 200px, /* circle */
			50px 200px, /* highlight */
			150px 200px,
			350px 200px,
			300px 200px,
			250px 200px;

		background-position:
			0 0, /* circle */
			0 0, /* highlight */
			120px 0,
			120px 40px,
			120px 80px,
			120px 120px;

		animation: shine 1s infinite;
	}

	@keyframes shine {
		to {
			background-position:
				0 0,
				100% 0, /* move highlight to right */
				120px 0,
				120px 40px,
				120px 80px,
				120px 120px;
		}
	}
Advertisements

:before and :after pseudo-element on an input field?

:before and :after render inside a container and <input> can not contain other elements.

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they’re not supported. A button on the other hand that’s also a form element supports them, because it’s a container of other sub-elements.

If you ask me, if some browser does display these two pseudo-elements on non-container elements, it’s a bug and a non-standard conformance. Specification directly talks about element content…

W3C specification

If we carefully read the specification it actually says that they are inserted inside a containing element:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

How to style Gradient Border Color

Again CSS3! Proof that how to use style based websites in state of image-less. In the past, the use of the image was inevitable when it comes to showing gradient colors. Today, it becomes much cleaner with the use of CSS3 Gradient Border color.
Following I have made a little example by applying CSS3 Gradient border color. Well, let’s see how the trick works.

CSS Gradient Border
CSS Gradient Border

The DOM

 <div class="contianer">
 <h2 class="box-header">Gradient Borders</h2>
 <div class="box-wrap">
 <div class="box top">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 <div class="box right">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 <div class="box bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 <div class="box left">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
 </div>
</div>

The CSS

         * {
            margin: 0px;
            padding: 0px;
        }

        .contianer {
            width: 800px;
            margin: 0px auto;
        }

        .box-header {
            padding: 5px 0px;
            margin: 20px 0px;
            border-bottom: 5px solid transparent;
	        border-image: linear-gradient(to right, #0099CC 0%, #F27280 100%);
	        border-image-slice: 1
        }

        .box-wrap {
            display: flex;
            flex-wrap: wrap;
        }

        .box {
            flex-basis: 0;
            flex-grow: 1;
            background: #F6F6F6;
            min-width: 300px;
            color: #000;
            padding: 10px;
            margin: 10px;

            /*CSS for gradient border*/
            border: 5px solid transparent;
        }

        .box.top {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to top, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }

        .box.right {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to right, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }

        .box.bottom {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to bottom, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }

        .box.left {
	    /*CSS for gradient border*/
	    border-image: linear-gradient(to left, #0099CC 0%, #F27280 100%);
            border-image-slice: 1;
        }