css

How to get a rotated linear gradient svg for use as a background image?

by

To rotate the gradient you can e.g use the ‘gradientTransform’ attribute, like this: <?xml version=”1.0″ ?> <svg xmlns=”http://www.w3.org/2000/svg” width=”100%” height=”100%” viewBox=”0 0 1 1″ preserveAspectRatio=”none”> <linearGradient id=”grad-ucgg-generated” gradientUnits=”userSpaceOnUse” x1=”0%” y1=”0%” x2=”100%” y2=”0%” gradientTransform=”rotate(65)”> <stop offset=”0%” stop-color=”#ffffff” stop-opacity=”0″/> <stop offset=”100%” stop-color=”#ff0000″ stop-opacity=”1″/> </linearGradient> <rect x=”0″ y=”0″ width=”1″ height=”1″ fill=”url(#grad-ucgg-generated)” /> </svg>

Change style of pseudo elements in angular2

by

You can achieve what you need with CSS variables. In your style sheet you can set the background image like this: .featured-image:after { content: ”; background-image: var(–featured-image); } After that you can programmatically set this variable on the same element or higher up in the DOM tree: <div class=”featured-image” [ngStyle]=”{‘–featured-image’: featuredImage}”> More about CSS variables … Read more

Is there a Google Chrome-only CSS hack? [closed]

by

Sure is: @media screen and (-webkit-min-device-pixel-ratio:0) { #element { properties:value; } } And a little fiddle to see it in action – http://jsfiddle.net/Hey7J/ Must add tho… this is generally bad practice, you shouldn’t really be at the point where you start to need individual browser hacks to make you CSS work. Try using reset style … Read more

Angular – Material: Progressbar custom color?

by

You can use ::ng-deep selector to achieve what you want, this answer has some info on it. How I did it: CSS ::ng-deep .mat-progress-bar-fill::after { background-color: #1E457C; } ::ng-deep .mat-progress-bar-buffer { background: #E4E8EB; } ::ng-deep .mat-progress-bar { border-radius: 2px; } HTML <mat-progress-bar mode=”determinate” value=”{{progress}}”></mat-progress-bar> And the result is this: EDIT: I found a way to … Read more

Apply Calibri (Body) font to text

by

There is no such font as “Calibri (Body)”. You probably saw this string in Microsoft Word font selection menu, but it’s not a font name (see e.g. the explanation Font: +body (in W07)). So use just font-family: Calibri or, better, font-family: Calibri, sans-serif. (There is no adequate backup font for Calibri, but the odds are … Read more

jQuery UI styled text input box

by

There’s nothing to stop you from doing $(“input”).button()… I like this: $(‘input:text, input:password’) .button() .css({ ‘font’ : ‘inherit’, ‘color’ : ‘inherit’, ‘text-align’ : ‘left’, ‘outline’ : ‘none’, ‘cursor’ : ‘text’ }); A fuller example.

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)