<div class="base">
<div class="headline">
<svg>
<clippath id="mask">
<text dominant-baseline="hanging">Awesome Headline</text>
</clippath>
</svg>
</div>
</div>
<style>
body {
background: url('https://images.pexels.com/photos/2179483/pexels-photo-2179483.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')no-repeat;
background-size:cover;
}
.headline {
font: 50px system-ui, sans-serif;
font-weight: 900;
backdrop-filter:invert(100%);
clip-path: url(#mask);
letter-spacing:30px;
}
.base {
position:absolute;
top:20%;
left:20%;
width:400px;
height:auto;
background-color:red;
transform: translate(-20%, -20%);
}
</style>
(https://i.stack.imgur.com/iQbqc.png)
I want to do like in this picture.
I don't know if it's because of the svg but it overflows from the width I gave the base class.
what I want to do is to make the text go down to a bottom line
Related
Here I'm trying to divide a <div> into 5 different triangles.
I have tried using CSS using borders but couldn't achieve the desired output. Can anyone point me in the right direction. How should I achieve this output.
.box {
display: flex;
width: 100%;
height: 100vh;
background-color: #ccc;
}
.traingle {
width: 20%;
height: 400px;
border: 3px solid #000;
}
<div class="box">
<div class="traingle"></div>
<div class="traingle"></div>
<div class="traingle"></div>
<div class="traingle"></div>
<div class="traingle"></div>
</div>
SVG and a number of polygons
div {
width: 80%;
margin: 1em auto;
}
<div>
<svg viewbox="0 0 200 100">
<polygon points="0,100 100,100 0,50 "
style="stroke:#000000; fill:#ff0000; stroke-width: 1;"/>
<polygon points="0,50 100,100 50,00 0,0 "
style="stroke:#000000; fill:#00ff00; stroke-width: 1;"/>
<polygon points="100,100 50,00 150,0"
style="stroke:#000000; fill:#0000ff; stroke-width: 1;"/>
<polygon points="100,100 200,50 200,0 150,0"
style="stroke:#000000; fill:#00ffff; stroke-width: 1;"/>
<polygon points="100,100 200,100, 200,50"
style="stroke:#000000; fill:#ff00ff; stroke-width: 1;"/>
</svg>
</div>
Use multiple background if it's only about visual result:
.box {
width:250px;
height:150px;
background:
linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom right/50% 50%,
linear-gradient(to bottom right,transparent 49.5%,purple 50%) bottom right/50% 200%,
linear-gradient(to bottom left ,transparent 49.5%,yellow 50%) bottom left/50% 50%,
linear-gradient(to bottom left ,transparent 49.5%,red 50%) bottom left/50% 200%,
blue;
background-repeat:no-repeat;
}
<div class="box">
</div>
Here is an idea with clip-path if you want to consider different divs:
.box {
width:450px;
height:250px;
position:relative;
overflow:hidden;
z-index:0;
}
.box > div {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-size:cover;
background-position:center;
}
.box > div:nth-child(2),
.box > div:nth-child(4){
right:50%;
-webkit-clip-path:polygon(0 0,100% 100%, 0 100%);
clip-path:polygon(0 0,100% 100%, 0 100%);
}
.box > div:nth-child(3),
.box > div:nth-child(5){
left:50%;
-webkit-clip-path:polygon(100% 0,100% 100%, 0 100%);
clip-path:polygon(100% 0,100% 100%, 0 100%);
}
.box > div:nth-child(2),
.box > div:nth-child(3){
top:-50%;
}
.box > div:nth-child(4),
.box > div:nth-child(5){
top:50%;
}
/*Irrelevant, simply to illustrate hover effect*/
.box > div:hover {
filter:grayscale(100%);
}
<div class="box">
<div style="background-image:url(https://picsum.photos/id/1/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/10/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/90/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/102/1000/800)"></div>
<div style="background-image:url(https://picsum.photos/id/118/1000/800)"></div>
</div>
I have tabs with svg background that stretches to the width of the text. Is there a way to edit my svg or css to fix the curvatures on the sides without splitting up the svg to separate elements or using pseudo after/before css? This way while the whole svg stretches the middle part, the sides would remain intact stretching only the middle rectangle element.
This would fix the "Other important specification" tab's stretched sides.
$(document).ready(function(){
$('.nav-tabs li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});
.product-info .row,
.recipe-info .row {
text-align: left;
margin-left: 5px;
}
.product-info .nav-tabs,
.recipe-info .nav-tabs {
border-bottom: 1px solid #def0f8;
}
.product-info .nav-tabs > li,
.recipe-info .nav-tabs > li {
background-color: transparent;
margin-bottom: 0;
overflow: visible;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.product-info .nav-tabs > li > a:hover,
.recipe-info .nav-tabs > li > a:hover {
color: white;
text-decoration: none;
border: 0;
background-color: transparent;
}
.product-info .nav-tabs > li > a,
.recipe-info .nav-tabs > li > a {
border: none;
height: 35px;
background-color: transparent;
padding: 0;
text-align: center;
margin-top: 1px;
z-index: 2;
}
.product-info .nav-tabs > li > a .tabbed,
.recipe-info .nav-tabs > li > a .tabbed {
margin: 0;
height: 35px;
width: auto;
}
.product-info .nav-tabs > li > a .tabbed span,
.recipe-info .nav-tabs > li > a .tabbed span {
font-family: Roboto;
font-weight: 500;
font-size: 16px;
color: #616161;
line-height: 35px;
letter-spacing: 0.01em;
background-color: transparent;
padding: 0;
display: inline;
white-space: nowrap;
min-width: 95px;
}
.product-info .nav-tabs > li.active > a,
.recipe-info .nav-tabs > li.active > a {
color: #ffffff;
z-index: 10;
}
.product-info .nav-tabs > li.active > a .tabbed,
.recipe-info .nav-tabs > li.active > a .tabbed {
background-image: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 134.5 35' preserveAspectRatio='none' data-name='Layer 1' id='Layer_1'%3E%3Cmetadata id='metadata15'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3Etab%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs3'%3E%3Cstyle id='style5'%3E.cls-1%7Bfill:%2325437f;%7D%3C/style%3E%3C/defs%3E%3Ctitle id='title7'%3Etab%3C/title%3E%3Cpath style='fill:%2325437f;fill-opacity:1' id='path9' transform='translate%280 0%29' d='M0,35H30V0C6.39,0,11.8,35,0,35Z' class='cls-1' /%3E%3Cpath style='fill:%2325437f;fill-opacity:1' id='path11' transform='translate%280 0%29' d='M134.5,35h-30V0C128.11,0,122.7,35,134.5,35Z' class='cls-1' /%3E%3Crect y='-5.5511151e-17' x='29.5' height='35' width='56.5%25' id='rect4143' style='opacity:1;fill:%2325437f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.5;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 100% 35px;
background-position: center;
}
.product-info .nav-tabs > li.active > a .tabbed span,
.recipe-info .nav-tabs > li.active > a .tabbed span {
color: #ffffff;
width: 100%;
margin: 0 35px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-info tabbable">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a href="#" data-toggle="tab">
<div class="tabbed">
<span class="">Details</span>
</div>
</a>
</li>
<li>
<a href="#" data-toggle="tab">
<div class="tabbed">
<span class="">Other important specification</span>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<div class="tab-content">
lorem ipsum
</div>
</div>
</div>
Probably nested svg's could solve this, here's a notion of how I imagine achieving the rightly expanding svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="35">
<defs>
<style>
</style>
</defs>
<title>expandable tab</title>
<!--
Whole tab as one path, if possible try to adjust the beizer curves so they
would keep the sides unstreched when image is streched on x axis.
-->
<!--
<path fill="#25437f" d="
m30 0
c-23.5,0 -18,35 -30,35
h30 40 30
c-12,0 -6.5,-35 -30,-35
z"
/>
-->
<!--
The sides should have fixed widths of 30, the middle uses up the available space in between.
-->
<g fill="#25437f">
<svg x="0" width="30" class="container-left">
<path d="m0 35h30v-35c-23.61 0-18.2 35-30 35z" class="path-left" vector-effect="non-scaling-stroke"/>
</svg>
<svg x="29" width="90%" style="overflow: hide;">
<!--
Should have width of 100% shrunken with 30 on the x axis.
Maybe apply a mask?
-->
<rect height="35" width="100%" y="-5.5511e-17"/>
</svg>
<svg x="100%" width="30" class="container-right" transform='translate(-30 0)'>
<!--
Its positioning should be counted from the right to left x="0" starting from right if direction could be set.
Hacking with x="100%" and transform="translate(-30 0)" should be doing the same, but they are not.
-->
<path d="m0 35h-30v-35c23.61 0 18.2 35 30 35z" class="path-right" vector-effect="non-scaling-stroke"/>
</svg>
</g>
</svg>
I'm looking for an implementation that uses pure html/svg/css techniques to adjust the tab size (no javascript adjustments). My goal with this is to replace an html hackery with left, middle and right blocks with one html element thus reducing the chance to mess the tab up, and renders the same way across browsers (from IE11>).
Sticking to my code structure with background-image, related css rules of course is not necessary, there could be even pure svg solutions with <text/> tags just to achieve the expanding tab as the text grows with non-stretching side paths.
Related interesting links:
https://www.sarasoueidan.com/blog/mimic-relative-positioning-in-svg/
https://codepen.io/gionkunz/pen/KDvLj
https://jsfiddle.net/boldewyn/taorj2q6/
Ok I tried changing this for you, and used pure CSS with 3 classes (left, middle, and right) - with different SVG base64 data for each. Still feels a bit hacky, but let me know if this is closer to what you are looking for.
$(document).ready(function(){
$('.nav-tabs li').click(function() {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});
ul {
display:block;
width: 100%;
}
li {
list-style:none;
}
.tabbed {
display:inline-block;
}
.nav-tabs {
display: inline-flex;
width: 100%;
}
.tab-content {
margin-top:50px;
margin-left:70px;
}
.tabText {
position:relative;
color:white;
display:inline-block;
z-index:10;
padding:10px;
height:35px;
vertical-align:top;
}
.left {
display:inline-block;
margin:0;
padding:0;
height: 35px;
width: 35px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 35' enable-background='new 0 0 30 35' xml:space='preserve'%3E%3Cpath id='left' fill='%2325437F' d='M0,35h30V0C6.4,0,11.8,35,0,35z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-size:cover;
}
.middle {
display:inline-block;
margin:0;
padding:0;
background-color: #25437F;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 56.5 35' enable-background='new 0 0 56.5 35' xml:space='preserve'%3E%3Crect id='middle' fill='%2325437F' width='56.5' height='35'/%3E%3C/svg%3E%0A");
background-repeat:no-repeat;
background-size:cover;
width:auto;
height:35px;
margin-left:-6px;
}
.right {
display:inline-block;
margin:0;
padding:0;
height: 35px;
width: 35px;
margin-left:-6px;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:cc='http://creativecommons.org/ns' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 35' enable-background='new 0 0 30 35' xml:space='preserve'%3E%3Cpath id='right' fill='%2325437F' d='M30,35H0V0C23.6,0,18.2,35,30,35z'/%3E%3C/svg%3E%0A");
background-repeat:no-repeat;
background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-info tabbable">
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a href="#" data-toggle="tab">
<div class="tabbed">
<div class="left">
<div class="tabText"></div>
</div>
<div class="middle">
<div class="tabText">Details</div>
</div>
<div class="right">
<div class="tabText"></div>
</div>
</div>
</a>
</li>
<li>
<a href="#" data-toggle="tab">
<div class="tabbed">
<div class="left">
<div class="tabText"></div>
</div>
<div class="middle"><div class="tabText">Other important specification</div></div>
<div class="right">
<div class="tabText"></div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="row">
<div class="tab-content">
lorem ipsum
</div>
</div>
</div>
This example from phrogz.net shows how to render an SVG element on either a page of aspect ratio close to 1:2 or 2:1. Either way the SVG appears at 1:1 ratio.
How can the same aspect-ratio-preservation + centering-in-div be simultaneously satisfied for an img element?
jsfiddle
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sizing SVG & IMG to Fill a Container</title>
<style type="text/css" media="screen">
html, body { background:#eee; margin:0; padding:0; height:100%; }
#foo { position:absolute; left:2%; width:46%; top:2%; height:96%; background:red; }
#bar { position:absolute; left:52%; width:46%; top:2%; height:96%; background:grey; }
svg { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }
img { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }
.face { stroke:#000; stroke-width:20px; stroke-linecap:round }
</style>
</head><body>
<div id="foo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-350 -250 700 500">
<circle r="200" class="face" fill="yellow"/>
<path fill="none" class="face"
transform="translate(-396,-230)"
d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537 c-41.421,0-76.961-25.185-92.142-61.076" />
<circle cx="-60" cy="-50" r="20" fill="#000"/>
<circle cx="60" cy="-50" r="20" fill="#000"/>
</svg>
</div>
<div id="bar">
<img src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
</div>
</body></html>
if you set you image as css style you can do it
html, body { background:#eee; margin:0; padding:0; height:100%; }
#foo { position:absolute; left:2%; width:46%; top:2%; height:96%; background:red; }
#bar {
background: url(http://www.pngall.com/wp-content/uploads/2016/07/Car-Download-PNG.png) no-repeat;
background-size: contain;
background-position: center;
position:absolute; left:52%; width:46%; top:2%; height:96%; }
svg { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }
img { position:absolute; top:0; left:0; width:100%; height:100%; background:green; }
.face { stroke:#000; stroke-width:20px; stroke-linecap:round }
<div id="foo">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-350 -250 700 500">
<circle r="200" class="face" fill="yellow"/>
<path fill="none" class="face"
transform="translate(-396,-230)"
d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537 c-41.421,0-76.961-25.185-92.142-61.076" />
<circle cx="-60" cy="-50" r="20" fill="#000"/>
<circle cx="60" cy="-50" r="20" fill="#000"/>
</svg>
</div>
<div id="bar">
</div>
Centering
Add position:relative to #bar then add the following to <img>:
position: absolute;
top: 50%;
left: 50%;
transform: translate3D(-50%, -50%, 0);
Maintain AR
Give absolute dimensions to <img> (used min-width and min-height) and add this to <img>:
object-fit:contain;
Here's the modified FIDDLE The dimensions for the <img> and #bar are scaled back to 10% so it is on par with the SVG. Note there is no comparison between SVG and <img> in Snippet, but the code for the <img> is the same with the exception of the scaled dimensions.
SNIPPET
#bar {
min-width:208px;
min-height: 320px;
border: 3px solid red;
position: relative;
}
img {
width: 100%;
min-width: 245px;
height: 100%;
min-height: 160px;
position: absolute;
top: 50%;
left: 50%;
transform: translate3D(-50%, -50%, 0);
object-fit: contain;
outline: 1px dashed blue;
}
<div id="bar">
<img src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
</div>
I need these images to be centered in this slideshow, the background-color is black, so if it doesn't fill the entire width or height then the surrounding area is just black. I need the images to completely fit.
How can I scale these images to fit properly? This is my code so far:
<div id="logo">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/mondepic1.jpg" alt="" />
<img src="images/img20.jpg" alt="" />
<img src="images/img22.jpg" alt="" />
</div>
</div>
<script type="text/javascript" src="lib/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
</div>
#slider-wrapper {
background:black;
width: 978px;
height: 389px;
margin:0 auto;
}
#slider {
position:relative;
width: 978px;`enter code here`
height: 389px;
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:relative;
top:0px;
left:0px;
display:none;
max-height:100%;
max-width:100%;
}
#slider a{
border:0;
display:block;
}
What if you set a CSS rule like this:
.nivoSlider img {
background-repeat: no-repeat;
background-size: cover;
}
This should size the image proportionally so you can see the whole thing, and so it fills its parent container.
What webkit meant in the comment was, that you should set the image property in CSS, like this:
.nivoSlider {
background-image: url(<path to image>);
}
I have a simple build of a parallax site and I am trying to layer one background image over another. The foreground image is basically the logo with a transparent cut out, and the cut out is the only part of the background image I want to be displayed on the screen.
The rest of the first slide should be a solid colour.
I want to do this so that it maintains the best quality of the foreground image as possible, scaling it as a % doesn't look half as good.
The site is here for demo http://www.designandintention.com/Raikon/
HTML in question so far:
<div align="center" class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".7">
<div align="center" id="menuwrapper">
<div align="center" id="slidemenu">
<div id="hrs">
</div>
Raikon Property Development
</div>
</div>
<div id="slideforeground" data-stellar-ratio="0" data-stellar-vertical-offset="0"alt="">
</div>
<a class="button" data-slide="2" title=""></a>
</div><!--End Slide 1-->
CSS:
.slide{
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
width:960px;
height:200px;
margin:0 auto;
position:relative;
}
.slideno{
font-family: 'Lato', sans-serif;font-weight:400;
position:absolute;
bottom:0px;
left:0px;
font-size:100px;
font-weight:bold;
color:rgba(255,255,255,0.3);
}
#menuwrapper {
width:90%;
height:0px;
}
#slideforeground{
background-image:url(../images/Foreground.png);
background-repeat:no-repeat;
background-position:center;
height:100%;
width:100%;
}
/******************************
SLIDE 1
*******************************/
#slide1{
background-color:#e3e8cf;
background-image:url(../ribahighgate-dexigner-james.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size:cover;
}