Hello i want to create web theme with this steps:
1 - Set a background image
First Step Image
2 - Set other background image in the end picture
3 - Create circles or boxes and now load the part of image one as boxes background (But how??? this is my question.)
Code:
<style>
#Background_1 {
width: 100%;
height: 100%;
background-image: url("img1.jpg");
background-size: 100% 100%;
z-index: 1;
position: fixed;
}
#Background_2 {
width: 100%;
height: 100%;
background-image: url("img2.jpg");
background-size: 100% 100%;
z-index: 2;
position: fixed;
}
.BoxLoad {
width: 250px;
height: 250px;
margin-left: 15%;
box-shadow: 0px 0px 11px 1px rgba(20, 20, 20, 0.8);
color: #FFFFFF;
border-radius: 50%;
display: inline-block;
font-size:24px;
}
</style>
<body>
<div id="Background_1">
<div id="Background_2">
<div class="BoxLoad">
</div>
<div class="BoxLoad">
</div>
<div class="BoxLoad">
</div>
</div>
</div>
on this source, we have 1 image on background (we can't see it) and 1 other (diff) image on it. and boxes on them. box have no background color and just have shadow with image 2 background. but what i need is to load background 1 as box background (part of background 1 not background 2) while background 1 still is under of back 2. it means if i create an other box anywhere of page with custom new settings, the background of that box was that point of back 1 image.
at the end i need something like this:
End Image (What i want)
You could assign an SVG clip path to your background image. Essentially, you build up the circles as below and then set the clip-path CSS property of the background div like so clip-path: url(#circles);
<svg>
<defs>
<clipPath id="circles">
<circle cx="100" cy="100" r="60" />
<circle cx="300" cy="100" r="60" />
<circle cx="500" cy="100" r="60" />
<circle cx="200" cy="250" r="60" />
<circle cx="400" cy="250" r="60" />
<circle cx="600" cy="250" r="60" />
<circle cx="300" cy="400" r="60" />
<circle cx="500" cy="400" r="60" />
<circle cx="700" cy="400" r="60" />
</clipPath>
</defs>
</svg>
Full fiddle: https://jsfiddle.net/hqss8taj/
You can check this link
The main idea is to put same image (as in background) in Your "step 3 circles" and fix their position to be the same, as background's.
However, It's just simulates transpanence.
Edit: as mentioned #Mike Stringfellow in another answer, You can use SVG clipPath, but it requires HTML5 support.
Create multiple divs for the circle and set the background image for the circle divs. Position the background image to get the desired position.
I have done for the first circle.
To differentiate the circle div with image to the end image you had attached I have used filter. Hope this is what you wanted.
.circle{
background-image: url(http://i.stack.imgur.com/EY480.jpg);
width: 300px;
height: 300px;
border-radius: 50%;
border: solid 1px red;
position: absolute;
-webkit-filter: brightness(200%);
}
.wrapper{
position: relative;
display: inline-block;
}
.circle1{
top: 72px;
left: 183px;
background-position: -183px -72px;
}
.circle2{
top: 152px;
left: 183px;
background-position: -183px -152px;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/OlmRK.jpg">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>
Related
In styles I want replace standard icon with custom svg icon. Is it possible via css/js?
I tried add a background-image, but old rectangle doesnt dissapear
HTML:
<input type="color" id="color-input" value="#563d7c" title="Choose your color">
CSS:
#color-input {
background-image: url("https://www.svgrepo.com/show/439108/color-theory.svg");
height: 35px;
width: 35px;
background-size: cover;
}
Tried to add a padding, and it works!
CSS now:
#color-input {
background-image: url("https://www.svgrepo.com/show/439108/color-theory.svg");
height: 35px;
width: 35px;
background-size: cover;
padding: 20px;
}
(standart color icon doesnt dissapear without padding. Still if you have more wise solution, I want to see that.
Thank you all. I made it thanks to all of you!
You can use Label for your input and put your svg as <img> in the html. Watch the snippet below:
input[type=color] {
position: absolute;
width: 0;
height: 0;
visibility: hidden;
z-index: -1;
}
label {
cursor: pointer;
}
<div id="color-picker">
<input type="color" id="color-input" value="#563d7c" title="Choose your color">
<label class="color-select" for="color-input"><img width="42px" height="42px" src="https://www.svgrepo.com/show/439108/color-theory.svg"></label>
</div>
Can you please post your code? Otherwise if what you are trying to do is insert an svg icon you can do something like this:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Also doing it this way is easier than doing it through styles. Is there a particular reason you want to do it in styles? Your other option is to convert the svg into a png and use it as a background image.
You can use the following page for that: https://svgtopng.com/
It works with padding in css
#color-input {
background-image: url("https://www.svgrepo.com/show/439108/color-theory.svg");
height: 35px;
width: 35px;
background-size: cover;
padding: 20px;
}
Here my React component demo: https://codesandbox.io/s/epic-brown-osiq1, I am now using the viewBox's values, getBBox and getBoundingClientRect() to realize some calculations in order to position my element. Currently I have entered raw value based on the return the console have provided me from the getBoundingClientRect()'s logs. You can see it on the element I have implemented the getBoundingClientRect() on, namely the <svg>'s root element and the clip-path's text's element. Better but the text is more place tower the center of the screen that really aligned on center of the text's box-you can see the "So"'s word is at the start of the "Food"'s word instead of being aligned on the box's center. So I am at this point currently. Thanks for the feedback.*
note: You will see some comments providing information or parts of my former trials inside the sandbox.
What my code does ? concretely I display a clip-path's text with some animated panel travelling the clip-path - this is the color_panel_group's element- giving some dynamic to the composition.There is also a shadow behind the text to give some depth to the composition.
Expectation: display a clip-path's text responsively positioned at the vertical and horizontal's centers of the viewport.
Problem: My clip-path hides a part of the text and my trials to center the element relative to viewport fails to be fructuous.
What I have tried: I have tried to play with the width of the element and the x's positions of the element -mainly text, clip-path, symbol and both case. Even tried to play with the use element by implementing some class in it, but at the end of the day very approximative result outcomed. Also In tspan and symbol I have tried to play with x's attribute, again with very approximative outcomes. I have tried to play with position absolute and a relative container -mainly on the SVG's CSS selector directly-, still with approximative outcomes.
I am wondering what I am missing. Maybe someone can bring some explanation on my code's behavior?
Here my second presentation's resulting code (approximately what React component produces):
body {
background: orange;
}
svg {
background: green;
display: block;
margin: auto;
position: relative;
z-index: 2;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.component {
min-width: 100vw;
min-height: 100vh;
font-size: 100%;
}
.fade_in_background {
opacity: 1;
visibility: visible;
transition: all 1.5s ease-out 0s;
}
.brandtype {
margin: auto;
text-align: center;
}
.brandtype_use {
position: absolute;
transform: translate(-112.65px, 0)
}
.clipPath_text {
text-align: center;
}
.color_panel_group {
padding: 25px;
}
.shape_animation {
transform-origin: 0;
transform: scale(0, 1) translate(0, 0);
animation: moving-panel 3s 1.5s 1 alternate forwards;
}
.shadow {
transform: translate(10px, 10px)
}
.shape_animation_shadow {
fill: black;
fill-opacity: .505;
transition: all 1.3s ease-out 0.3s;
}
.brandtype {
font-size: 6.8em;
}
#keyframes moving-panel {
to {
transform: scale(1, 1) translate(20px, 0);
}
}
<div class="component">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 965 657">
<defs>
<symbol id="panel_animation" y="0">
<clipPath class="clipPath_text" id="clipPath_text"><text class="brandtype" word-spacing="-.45em">
<tspan x="0%" y="50%" dy="1.6em">So</tspan>
<tspan x="0%" y="50%" dy="3em">Food</tspan>
</text></clipPath>
<g class="shadow" clip-path="url(#clipPath_text)">
<rect class="shape_animation shape_animation_shadow" width="100%" height="100%" x="-25px">
</rect>
</g>
<g class="color_panel_group" clip-path="url(#clipPath_text)">
<rect class="shape_animation" fill="#F2385A" width="100%" height="100%"></rect>
<rect class="shape_animation" fill="#F5A503" width="80%" height="100%"></rect>
<rect class="shape_animation" fill="#E9F1DF" width="60%" height="100%"></rect>
<rect class="shape_animation" fill="#56D9CD" width="40%" height="100%"></rect>
<rect id="shape_animation_ref" class="shape_animation" fill="#3AA1BF" width="20%" height="100%" x="-25px">
</rect>
</g>
</symbol>
</defs>
<rect width="100%" height="100%" filter="url(#background_light)"></rect>
<use width="500px" height="100%" x="50%" xlink:href="#panel_animation" class="brandtype_use"></use>
</svg>
</div>
Thanks for any hint.
Text alignment in SVG does not work the way we are used to from HTML and CSS where everything is box with some dimensions and we can apply e.g. text-align: center.
In <svg:text> the starting coordinates define point from which will text line expand.
text-anchor attribute controls which direction this expansion will occur: center value means it will expand both ways so the initial anchor point will be in the middle of bounding box width (for horizontal writing systems). See excellent answer illustrating this text-anchor as the best mean for centering text in SVG: https://stackoverflow.com/a/23272367/540955. Also, there is no CSS position properties (left/top) inside SVG, only x/y coordinates, nor margins and rest of box-model as you know it in HTML.
So in your code adding text-anchor="middle" and moving the x coordinates further right would produce centered text. I'd advise to use bare <text> elements as opposed to <tspan>s, because shifting them with dx/dy is relative to the last preceding character and this character could be some white space from parent <text> (depending on code formatting) what would produce unbalanced centering. Also for easier calculations dominant-baseline="central" (or just middle for horizontal writing systems) is useful, because it moves the anchor point from the base line to "center line".
So using dy attribute (as you already do) to move the first line "one half" of line-height up and the other down should do the trick:
<svg viewBox="0 0 800 200" text-anchor="middle" dominant-baseline="central" font-size="100">
<!-- Outline and diagonals with center point for illustration: -->
<path d="M0,0h800v200h-800zl800,200m0 -200L0,200" fill="#FC9" stroke-width="1" stroke="rgba(0,0,0,0.3)"></path>
<circle cx="50%" cy="50%" r="10" fill="red"></circle>
<!-- Centered text: -->
<text x="50%" y="50%" fill="rgba(0,0,0,0.3)">So</text>
<!-- Shifted up and down: -->
<text x="50%" y="50%" dy="-0.5em">So</text>
<text x="50%" y="50%" dy="+0.5em">Food</text>
</svg>
(Not entirely related: the clipping could be done in CSS only with background-clip: text; here is rough variation of your design as it appears in Chrome browser, with animated text background, but without shadows. Unfortunately adding shadows would require more elements or attributes, I think. This should work in any browser supporting background-clip.)
div {
display: flex;
flex-direction: column;
align-items: center;
font-size: 30vh;
line-height: 30vh;
font-weight: bold;
font-family: Impact;
}
span {
color: #fff;
background-color: #000;
width: 100%;
text-align: center;
}
#supports (-webkit-text-fill-color: transparent) and (-webkit-background-clip: text) {
span {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: 2s wohoo infinite alternate cubic-bezier(1,0,1,1);
background-position: 0 0;
background-size: 100% 100%;
background-color: transparent;
background-image: linear-gradient(
to right,
#f2385a 0,
#f2385a 20%,
#f5a503 0,
#f5a503 40%,
#e9f1df 0,
#e9f1df 60%,
#56d9cd 0,
#56d9cd 80%,
#3aa1bf 0,
#3aa1bf 100%
);
background-repeat: no-repeat;
transform-origin: center center;
}
}
#keyframes wohoo {
from {
background-size: 0 100%;
background-position: -5vh 0;
transform: scale(0.7);
}
50% {
transform: scale(0.7);
}
90% {
transform: scale(0.9);
}
to {
background-size: 500% 100%;
background-position: 0vh 0;
transform: scale(0.9)
}
}
html,body{margin:0;overflow:hidden;}
body {
background-color: #1d1f20;
color: snow;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
<div>
<span>Baz</span>
<span>Gazonk</span>
<span>Qux</span>
</div>
I have seen many things hinting at this possibility:
https://css-tricks.com/svg-text-typographic-designs/
SVG Scaling Text to fit container
http://www.petecorey.com/blog/2014/10/08/quest-for-scalable-svg-text/
https://discourse.wicg.io/t/auto-sizing-text-to-fit-container/1053/8
That first link is best, which shows how the text scales.
I have implemented a janky JavaScript version of this functionality, but I want to apply it to a lot of elements and I think SVG would be a better choice.
However, my attempt at copying the code from that first link doesn't end up with the same result, it doesn't work:
<head>
<style>
* {
padding: 0px;
margin: 0px;
}
/*div*/.ad-wrapper {
height: 0;
padding-top: 100%;
position: relative;
}
/*svg*/.ad {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: red;
color: black;
}
</style>
</head>
<body>
<div class="ad-wrapper">
<svg class="ad" xmlns="http://www.w3.org/2000/svg">
<text font-family="'proxima-nova', sans-serif">Mountain</text>
</svg>
</div>
</body>
Wondering what I'm doing wrong and how to fix it. I would like to have text centered in a responsive box (square even), where the padding on all sides of the text is proportionally the same as it scales up, without the need to use JavaScript at all.
Use always a viewBox attribute. A viewBox="0 0 100 100" will give you a square box. Give the text a x and a y. In this case you may use x="50" y="50" In order to center the text you may use text-anchor:middle;dominant-baseline:middle
* {
padding: 0px;
margin: 0px;
}
/*div*/.ad-wrapper {
height: 0;
padding-top: 100%;
position: relative;
}
/*svg*/.ad {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: red;
color: black;
}
text{fill:black;text-anchor:middle;dominant-baseline:middle}
<div class="ad-wrapper">
<svg class="ad" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" font-family="'proxima-nova', sans-serif">Mountain</text>
</svg>
</div>
I've tried changing between <line> and <path> in case the percentage parameters made a difference. But I'm still getting the same issue where the <svg> won't line up with my <img>'s. My end goal is to basically have the 2 ends of the <svg> lock into the border of the <img>'s. Any advice would be amazing.
Pen
html:
<div class="svg-benefitsContainer">
<svg class="benefitSVG" height="500%" width="100%" preserveAspectRatio="none">
<line class="benefitSVG1" x1="15%" y1="15%" x2="20%" y2="32%" />
</svg>
</div>
<div>
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png" class="benefitsImgMed" />
<img src="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f014ec212d1131cf09fc/1510600724150/flash.png" class="benefitsImgLig" />
css:
body {
background-color: black;
}
.benefitsImgMed,
.benefitsImgLig,
.benefitsImgArr,
.benefitsImgNig {
position: absolute;
padding: 10px;
border-color: white;
border-width: 5px;
border-radius: 50%;
border-style: solid;
}
.benefitsImgMed {
margin-left: 8%;
margin-top: 6%;
width: 13%;
}
.benefitsImgLig {
margin-top: 32%;
margin-left: 19%;
width: 13%;
}
.benefitsImgArr {
margin-left: 37%;
margin-top: 3%;
width: 13%;
}
.benefitsImgNig {
margin-left: 66%;
margin-top: 18%;
width: 13%;
}
.svg-benefitsContainer {
width: 100%;
height: 500%;
}
.benefitSVG {
position: absolute
}
.benefitSVG1 {
fill: none;
stroke: white;
stroke-width: 5;
/*L 125 315 q -20 200 115 190*/
}
Because SVG percentages work differently to HTML percentages.
The <svg> width and height are relative to its parent container width and height respectively.
The <line> x and width are relative to the SVG viewport width.
The <line> y and height are relative to the SVG viewport height.
The <image> left and top are relative to the browser width.
If you want it to be reliable, the safest solution is to put all of the objects in an SVG file together. It's a lot simpler to understand also.
body{background-color:black;}
line, circle {
fill: black;
stroke: white;
stroke-width: 0.5;
}
<div class="svg-benefitsContainer">
<svg class="benefitSVG" height="100%" width="100%" viewBox="0 0 100 100">
<line class="benefitSVG1" x1="14.5" y1="12.5" x2="25.5" y2="38.5" />
<circle cx="14.5" cy="12.5" r="8"/>
<image xlink:href="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f06d9140b7f3b7d84274/1510600813361/quality.png"
x="8" y="6" width="13" height="13"
class="benefitsImgMed"/>
<circle cx="25.5" cy="38.5" r="8"/>
<image xlink:href="https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/5a09f014ec212d1131cf09fc/1510600724150/flash.png"
x="19" y="32" width="13" height="13"
class="benefitsImgLig"/>
</svg>
I'm trying to achieve something like the following:
The diagonal split should go from the top right corner to the bottom left corner, at an exact angle so that both sides are totally equally proportioned.
I found an example online, but it was for wide aspect images, while trying to modify it to fit my 1:1 ratio purpose, I can't seem to get the bottom image to line up properly, but the top one works fine.
The diagonal split is also off-center, and the yellow background is there to show the area that should be filled by the lower image. The lower image should be the same size as the top one, just with the bottom half instead of the top half showing.
I have created a fiddle to demonstrate: https://jsfiddle.net/uxuv17at/2/
HTML
<div class="split-image-container">
<div class="split-image-bottom">
<img src="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&w=300" alt="Just Another Clan" title="Just Another Clan" />
</div>
<img src="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=300" alt="ExtraordinaryKillers" title="ExtraordinaryKillers" />
</div>
CSS
.split-image-container{
height: 300px;
width: 300px;
overflow: hidden;
position: relative;
border: 1px solid black;
padding: 0;
background-color: green;
}
/*Rotate this div and position it to cut the rectangle in half*/
.split-image-bottom{
transform: rotate(315deg);
position: absolute;
top: 85px;
left: 70px;
overflow: hidden;
height: 350px;
width: 350px;
background: yellow;
}
/*Apply exact opposite amount of rotation to the .image2 class so image appears straight */
/*Also align it with the top of the rectangle*/
.split-image-bottom img{
transform: rotate(45deg);
position: absolute;
top: -50px;
left: 15px;
}
CSS Only
Pure CSS solution using the clip-path property. Browser support is pretty bad though.
.split-image-container{
height: 300px;
width: 300px;
position: relative;
}
img{
width:100%;
height:100%;
position:absolute;
}
.clip{
-webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}
<div class="split-image-container">
<img src="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&w=300" alt="Just Another Clan" title="Just Another Clan"/>
<img src="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=300" alt="ExtraordinaryKillers" title="ExtraordinaryKillers" class="clip"/>
</div>
SVG
This one uses the svg clippath. Browser support should be a lot better.
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<clipPath id="clipPolygon">
<polygon points="100 0,0 100,100 100">
</polygon>
</clipPath>
<image viewBox='0 0 100 100' preserveAspectRatio='none' height="100" width="100" xlink:href="https://merkd.com/usr/members/icons/thumb.php?src=1435366066.9.png&w=300" />
<image viewBox='0 0 100 100' preserveAspectRatio='none' height="100" width="100" clip-path="url(#clipPolygon)" xlink:href="https://merkd.com/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=300" />
</svg>