It means pseudo element selector. It means the element to the right doesn’t exist in the normal DOM, but can be selected. A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. Source It was originally only a single colon, but was changed to differentiate it from pseudo classes (like … Read more
Answered my own question after reading your advice on the vertical-align CSS attribute. Thanks for the tip! .pdf:before { padding: 0 5px 0 0; content: url(../img/icon/pdf_small.png); vertical-align: -50%; }
Update September 10, 2014: You shouldn’t need to do any of the query string hacks below anymore since Cloudfront properly supports CORS now. See http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ and this answer for more info: https://stackoverflow.com/a/25305915/308315 OK, I finally got the fonts working using the config below with a little tweak from examples in the documentation. My fonts are … Read more
You could use a filter to generate the background. <svg width=”100%” height=”100%”> <defs> <filter x=”0″ y=”0″ width=”1″ height=”1″ id=”solid”> <feFlood flood-color=”yellow” result=”bg” /> <feMerge> <feMergeNode in=”bg”/> <feMergeNode in=”SourceGraphic”/> </feMerge> </filter> </defs> <text filter=”url(#solid)” x=”20″ y=”50″ font-size=”50″>solid background</text> </svg>
I see 2 easy options: multiple background with a translucent single gradient over image huge inset shadow gradient option: html { min-height:100%; background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/1043/800/600); background-size:cover; } shadow option: html { min-height: 100%; background: url(https://picsum.photos/id/1043/800/600); background-size: cover; box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3); } … Read more
This type of layout is called Masonry layout. Masonry is another grid layout but it will fill out the whitespace caused by the difference height of elements. jQuery Masonry is one of jQuery plugin to create masonry layout. Alternatively, you can use CSS3 columns. But for now jQuery based plugin is the best choice since … Read more
.classA.classB refers to an element that has both classes A and B (class=”classA classB”); whereas .classA .classB refers to an element with class=”classB” descended from an element with class=”classA”. Edit: Spec for reference: Attribute Selectors (See section 5.8.3 Class Selectors)
Just use in the CSS whatever you would use in a fill attribute. Of course, this requires that you have defined the linear gradient somewhere in your SVG. Here is a complete example: rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); } <svg width=”100″ height=”50″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”> <style type=”text/css”> rect{fill:url(#MyGradient)} </style> <defs> <linearGradient id=”MyGradient”> <stop … Read more
Without the combined child selector you would probably do something similar to this: foo { bar { baz { color: red; } } } If you want to reproduce the same syntax with >, you could to this: foo { > bar { > baz { color: red; } } } This compiles to this: … Read more
You can use position:absolute; to absolutely position an element within a parent div. When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can’t find one it will position absolutely from the window so you will need to make sure the content div is positioned. To make the … Read more