At the moment I am developing this simple site:
https://carl-robertshaw1.superhi.com/
The diagonal line is an SVG image but I what to code this SVG so that it is responsive, so it reminds at 1px on any screen, goes to the bottom left-hand corner and meets the logo in the same place, just off the 'C' of carl.
I've had a good look on here and can't find anything that would help me, can anyone help.
At the moment I have the SVG image set up like this:
.image1 {
position: fixed;
top: 0;
left: 0;
padding: 77px 230px 0 0;
}
.parent {
position: relative;
top: 0;
left: 0;
color: #ffffff;
}
<div class="parent">
<img class="image1" src='carl_line_mid.svg'>
</div>
Why don't just insert the SVG element into the HTML DOM?
Try:
<div class="parent">
<svg class="image1" style="height: 100%; width: 100%;">
<line x1="100%" y1="0" x2="0" y2="100%" style="fill:none; stroke:#fff; stroke-width:1px;"></line>
</svg>
</div>
I made some adjustments to the image. You can change the size of the svg via the style attribute (currently 100% of container), or remove the style attribute and set it with CSS. The width of the line will stay 1px.
See the browser support. It's great!
Related
I have file with star in SVG format. How to make border of that figure(not entire square with that star) using css? Also, how make fill that image on hover effect?
I tried to add in html:
<i class="favorite"></i>
and in scss:
.favorite {
width: 17px;
height: 16px;
display: block;
text-indent: -9999px;
background-size: 17px 16px;
background: url(../../../../../assets/images/icon-star.
}
But I dont see anything. When i change background-color to for example red I see white star on red square. How to make it work?
You can't change the colours of an SVG that's included via <img> or background-image. You'll need to include it inline in your page. You can then change the colours using the fill and stroke properties.
.square {
fill: red;
stroke: blue;
stroke-width: 4;
}
<div>
<p>Hello world</p>
<svg>
<rect class="square" x="5" y="5" width="100" height="100"/>
</svg>
</div>
TLDR: i want to achive this as scalable solution:
Longer explanation:
Target is to have a rotated div with a gradient as background. But the problem is that the rotation cant be defined as deg because it varies depending on the browser-width. So the element should be 100% width of the browser with a fixed height on the left and a fixed lower height on the right side.
Basically this can be done easily with an image-background which stretches only horizontally. Only problem is that there should be also a pattern overlay which should be clipped on the same area and this should repeat and not stretch (as you can see these pattern consists of equal boxes)
So my idea was: Is it possible to rotate an element for specific target pixels?
Current Example:
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(to right, #03cc65, #fbfe02);
height: 100px;
width: 200%;
transform-origin: top left;
transform: rotate(-2deg);
margin-top: -60px;
}
https://jsfiddle.net/0egg320q/
You see the problem on the right edge when resizing the browser. So on width screens you see the end of the triangle and small screens it is too high. Target is to remain same heights on left and right edges on every browser size.
Any other ideas are welcome.
You may use clip-path with percentage. Like this you will always have your fixed heights, then you may simply rotate the linear gradient as you need :
body {
background:#ccc;
}
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(10deg, #03cc65, #fbfe02);
height: 100px;
width: 100%;
-webkit-clip-path: polygon(120% 0, 0 0, 0 100%);
clip-path: polygon(120% 0, 0 0, 0 100%);
}
<div class="triangleClipper">
<div class="designElement"></div>
</div>
You only need to pay attention as this property it not supported by all browser.
Another solution using pseudo element, but in this case you will have the bottom part colored and not transparent :
body {
background:#ccc;
}
.triangleClipper {
height: 100px;
overflow: hidden;
}
.designElement {
background: linear-gradient(10deg, #03cc65, #fbfe02);
height: 100%;
width: 100%;
position:relative;
overflow:hidden;
}
.designElement:after {
content: "";
position: absolute;
border-right: 120vw solid #fff;
border-bottom: 100px solid #fff;
border-top: 100px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangleClipper">
<div class="designElement"></div>
</div>
UPDATE
Another good solution using skew transformation and some % properties. This solution will not make the heights fixed but it will make the ratio of the two height fixed. It can be interesting one too.
body {
background: #ccc;
}
.triangleClipper {
width: 100%;
overflow: hidden;
padding-top: 30%;
}
.designElement {
background: linear-gradient(to right, #03cc65, #fbfe02);
padding-top: 100%;
margin-top: -120%;
width: 100%;
transform: skewY(-7deg);
}
<div class="triangleClipper">
<div class="designElement"></div>
</div>
After searching for a cross-browser way for clip-path (especially IE) i found out that using an SVG is the best solution for that.
Sadly an SVG dont support percentage values for polygons so i could only fix this via adding JavaScript and correcting the values live depending on browser size.
(In basic the SVG works for scaling the object, JS is only there for correcting the pattern-image-output.)
$(function() {
//svg der fensterbreite anpassen
var fullWidth = $('.styleElementTop').width();
console.log(fullWidth);
$('.styleElementTop svg')[0].setAttribute('viewBox', '0 0 ' + fullWidth + ' 100');
$('.styleElementTop #gradientFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
$('.styleElementTop #patternFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
});
body {
padding: 0px;
margin: 0px;
}
.styleElementTop {
height: 100px;
width: 100%;
}
#gradientFill {
fill: url(#mainGradient);
}
#patternFill {
fill: url(#mainPattern);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styleElementTop">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 100" preserveAspectRatio="none">
<defs>
<linearGradient id="mainGradient">
<stop stop-color="#03cc65" offset="0%" />
<stop stop-color="#fbfe02" offset="100%" />
</linearGradient>
<pattern id="mainPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<image width="10" height="10" xlink:href="https://live.tlprod.de/temp/whitepattern.png" />
</pattern>
</defs>
<polygon id="gradientFill" points="0,0 0,100 700,10 700,0"></polygon>
<polygon id="patternFill" points="0,0 0,100 700,10 700,0"></polygon>
</svg>
</div>
So what I'm trying to do is have an SVG overlay on an image on hover. Eventually I will animate it, but for now I'm just trying to get the overlay working. This is what I tried:
<div class="centering margin-on-top">
<img id="img1" src="media/circle-1.jpg" />
<img id="img2" src="media/circle-2.jpg" />
<img id="img3" src="media/circle-3.jpg" />
</div>
CSS:
#img1:hover {
background: url("../svg/stroke-ears.svg") no-repeat;
}
At first I thought it wasn't working at all. But then when I put the hover on the containing div instead and deleted the picture inside the "inspect element" window, the svg was there but hidden underneath the image.
Is there a way for me to maybe set a z-index on the image or the background?
Thanks in advance.
Change your CSS to this:
#img1 {
position: relative;
}
#img1:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("../svg/stroke-ears.svg") no-repeat;
}
What you're doing is creating a pseudo-element to overlay on top of the img. Your original img had the background applied to the background of the img as opposed to overlaying it.
This new solution creates an element outside the normal DOM that will treat your img as a container and cover the entirety of its dimensions with an element that has the original background you wanted applied.
Update
JSFiddle example
So, silly me, trying to treat imgs as containing elements. Here's the fix.
HTML
<div class="inline-container centering margin-on-top">
<div class='img-holder'>
<img id="img1" src="http://placehold.it/200x200" />
</div>
<div class='img-holder'>
<img id="img2" src="http://placehold.it/200x200/FBC93D" />
</div>
<div class='img-holder'>
<img id="img3" src="http://placehold.it/200x200/075883" />
</div>
</div>
CSS
.inline-container {
font-size: 0;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder:hover:after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
background: url("http://placeskull.com/200/200") no-repeat;
}
You could easily swap the images to be background images on the new div, too, if you wanted to shorten up your HTML.
I'm trying to figure out a way to center vertically my SVG Tag.
Basically, here is a simplified SVG code i'm trying to center :
<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
<g id="1" style="font-size: 0.7em;">
<image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
</g>
</g>
</svg>
I have no trouble putting it in the middle (horizontally speaking) of the page, however i'd like it to be vertically centered as well.
I can add wrappers, but i'd like to know a generic way of doing this, not depending on the SVG size nor the window size.
I have tried multiple ways, but nothing worked.
Thanks,
I updated this answer as current browser have a lot better solution for that.
How wise man said, first year you learn html and css, for another few years you learn advanced javascript and after five years you finally learn how to vertically center div.
to vertically/horizontally align anything in css you can use two main ways:
Absolute
<div class="outside">
<div class="inside">Whatever</div>
</div>
and css:
.outside{
position:relative;
}
.inside{
position:absolute;
top:50%;
bottom:50%;
transform:translate(-50%, -50%);
}
the only issue with that is that element doesn't generate the height.
Flexbox
Flexbox has now pretty good support so why not to use it. https://caniuse.com/#feat=flexbox
Using flexbox your item doesn't need to be absolute so it will generate the height. code:
<div class="outside">
<div>Whatever</div>
</div>
and css:
.outside{
display: flex;
align-items: center;
justify-content: center;
}
Old answer:
you have height and width so u can use margin : auto auto;
or put it in div with
position:absolute ;
left:50% ;
margin-left: -(half of width of image)px;
top:50% ;
margin-top: -(half of height of image)px;
the second one will be better if u will be doing some stuff with it (javascript animation or something)
I didn't check it but maybe u can use second option for svg (without outer div) too
It's Simple!
HTML:
<div class="a">
<div class="b">
<div class="c">
<!-- Your SVG Here -->
</div>
</div>
</div>
CSS:
<style>
.a {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.b {
display: table-cell;
vertical-align: middle;
}
.c {
margin-left: auto;
margin-right: auto;
height: /* Your size in px, else it will expand to your screen size!*/
width: /* Your size in px, else it will expand to your screen size!*/
}
</style>
If you provide your svg element with a viewBox attribute and set it's width & height attributes to 100% then all should be well (in most browsers..)
$(document).ready(function(){
$(".panel-left").resizable({handleSelector: ".splitter",containment: "parent"});
});
#ctr
{
position: absolute;
border: 1px solid #131313;
top: 5%;
left: 5%;
bottom: 5%;
right: 5%;
display: flex;
flex-direction: row;
}
#ctr svg
{
height: 100%;
width: 100%;
}
.panel-left
{
flex: 0 0 auto;
padding: 10px;
width: 50px;
min-height: 50px;
min-width: 50px;
max-width: 80%;
max-height: 100%;
white-space: nowrap;
background: #131313;
color: white;
}
.splitter
{
flex: 0 0 auto;
width: 18px;
}
.panel-right
{
flex: 1 1 auto;
padding: 10px;
min-width: 20px;
background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div style="visibility:hidden; position:absolute; width:0">
<svg>
<g id="my-funky-svg-defs">
<defs>
<radialGradient id="gradient" cx="25%" cy="25%" r="100%" fx="40%" fy="40%">
<stop offset= "0%" stop-color="hsla(313, 80%, 80%, 1)"/>
<stop offset= "40%" stop-color="hsla(313, 100%, 65%, 1)"/>
<stop offset="110%" stop-color="hsla(313, 100%, 50%, 0.7)"/>
</radialGradient>
</defs>
<title>smarteee</title>
<circle class="face" cx="200" cy="200" r="195" fill="url(#gradient)" />
<ellipse class="eye eye-left" cx="140" cy="150" rx="10" ry="40" fill="#131313"/>
<ellipse class="eye eye-right" cx="260" cy="150" rx="10" ry="40" fill="#131313"/>
<path class="smile" d="M120,280 Q200,330 280,280" stroke-width="10" stroke="#131313" fill="none" stroke-linecap="round"/>
</g>
</svg>
</div>
<div id=ctr>
<div class="panel-left">
<svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>
</div>
<div class="splitter">
</div>
<div class="panel-right">
<svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>
</div>
</div>
&here's a corresponding jsfiddle to play with
NB: there is also the preserveAspectRatio attribute that works in conjunction with the viewBox settings. eg: preserveAspectRatio="xMidYMid meet"
You could try using flexbox.
Simple HTML:
<div class="outside">
<svg />
</div>
CSS:
.outside {
display: flex;
align-items: center; /* vertical alignment */
justify-content: center; /* horizontal alignment */
}
HTML with your sample:
<div class="outside">
<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
<g id="1" style="font-size: 0.7em;">
<image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
</g>
</g>
</svg>
</div>
Flexbox browser support: caniuse flexbox
Learn about Flexbox: CSS Tricks Guide to Flexbox
Learn by playing: Flexbox Froggy
I've finally used some JS code to do so.
I was using the solution from here : Best way to center a <div> on a page vertically and horizontally?
Which is :
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
But the problem is that if the SVG is bigger than the window size, it gets cropped.
Here is the JS code i've used in onLoad :
var heightDiff = window.innerHeight - svg.height.baseVal.value;
var widthDiff = window.innerWidth - svg.width.baseVal.value;
if (heightDiff > 0)
svg.style.marginTop = svg.style.marginBottom = heightDiff / 2;
if (widthDiff > 0)
svg.style.marginLeft = svg.style.marginRight = widthDiff / 2;
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.