angularjs: ng-src equivalent for background-image:url(…)
This one works for me <li ng-style=”{‘background-image’:’url(/static/’+imgURL+’)’}”>…</li>
css
Using two CSS classes on one element [duplicate]
If you want two classes on one element, do it this way: <div class=”social first”></div> Reference it in css like so: .social.first {} Example: https://jsfiddle.net/tybro0103/covbtpaq/
Can you set a border opacity in CSS?
Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity: div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* … Read more
Freeze screen in chrome debugger / DevTools panel for popover inspection?
Got it working. Here was my procedure: Browse to the desired page Open the dev console – F12 on Windows/Linux or option + ⌘ + J on macOS Select the Sources tab in chrome inspector In the web browser window, hover over the desired element to initiate the popover Hit F8 on Windows/Linux (or fn … Read more
Background-image in keyframe does not display in Firefox or Internet Explorer
As per the specs, background-image is not an animatable or a transitionable property. But it does not seem to say anything about what or how the handling should be when it is used as part of transition or animation. Because of this, each browser seem to be handling it differently. While Chrome (Webkit) is displaying … Read more
Error: CSS: background: / is an incorrect operator
If we refer to the formal syntax: The / is the separation between background-position and background-size (this one being optional) so the correct syntax is: background: url(…) 100% 0/4% no-repeat; Where background-position:100% 0 and background-size:4% Note that background-size should always be specified with background-position when using shorthand syntax. You cannot specify the size without position … Read more
How to thematize in lesscss
It all depends on how many styles and variables differ between themes, for example a (very) basic staring point could be something like: @themes: blue rgb( 41, 128, 185), marine rgb( 22, 160, 133), green rgb( 39, 174, 96), orange rgb(211, 84, 0), red rgb(192, 57, 43), purple rgb(142, 68, 173); // usage: #navBar { … Read more
Hexagon shape with CSS3
A simple search turned this up: CSS Hexagon Tutorial Referenced from the site: Put a 104px × 60px div with a background colour between them and you get (the hexagon): width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid transparent; border-right: 52px solid transparent; width: 104px; height: 60px; background-color: #6C6; width: 0; border-top: 30px solid … Read more
Outlining and partially filling an SVG Shape
You can alternatively do this with a filter. Here is one that animates the fill: <svg height=”210″ width=”500″> <defs> <filter id=”fillpartial” primitiveUnits=”objectBoundingBox” x=”0%” y=”0%” width=”100%” height=”100%”> <feFlood x=”0%” y=”0%” width=”100%” height=”100%” flood-color=”red” /> <feOffset dy=”0.5″> <animate attributeName=”dy” from=”1″ to=”.5″ dur=”3s” /> </feOffset> <feComposite operator=”in” in2=”SourceGraphic” /> <feComposite operator=”over” in2=”SourceGraphic” /> </filter> </defs> <polygon filter=”url(#fillpartial)” points=”165.000, … Read more
Specify an SVG as a background image and ALSO style the SVG in CSS?
No, this is not possible. The SVG has to be prepared in one document (which may be a data URI or an externally referenced file) and then used as a background in another file.