I've been searching for 2 days now, reading up on clip, clip-path, masking and everything there is to know about this css-subject.
But I can't figure out how to achieve the following:
I have a red body background color.
on top of this is a full-width, full height div, that's white. (red body isn't showing).
I want to cut out a shape out of the white div, to show a bit of red background.
Does anyone know how this can be done?
Much appreciated!
Thanks
Mario.
fiddle: https://jsfiddle.net/ecaw94vw/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<!--<div class="svgMask" width="0" height="0">
<svg>
<defs>
<mask id="svgmask2">
<image width="100%" height="100%" xlink:href="assets/images/masks/triangle-1-mask.svg"/>
</mask>
</defs>
<image mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="https://dl.dropboxusercontent.com/u/32494584/backdrop.jpg"/>
</svg>
</div>-->
<div class="mask">
</div>
</div>
</body>
</html>
The css
body{
background:red;
}
.mask{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
background: white;
-webkit-clip-path: polygon(100px 100px, 200px 0px, 500px 500px);
}
thanks
Okay, I think I've found a solution here that suits your needs!
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
.clip-text--no-textzone:before {
background-position: -.65em 0;
}
.clip-text--no-textzone:after {
content: none;
}
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.clip-text_one {
background-image: url(http://lorempixel.com/480/200/abstract/7);
}
<div class="clip-text clip-text_one">THIS IS CUT OUT</div>
Related
I am trying to make colored header and it wont work on mobile browsers (header is not visible). Does someone know please why is this happening? Thank you very much.
Maybe it should be because of other code I have there.
HTML from Next.Js
<div className={indexStyles.sliderWrapper}>
<div className="container">
<div className={indexStyles.sliderText}>
<h1>Autoslavkov</h1>
<ul>
<li>Autočalounictví</li>
<li>Autorizovaný chiptuning</li>
<li>Auto klimatizace</li>
<li>Renovace světel</li>
</ul>
</div>
</div>
<Image
src="/images/slid1.jpg"
alt=""
layout="fill"
objectFit="cover"
/>
</div>
And CSS
.sliderWrapper{
width: 100%;
position: relative;
min-height: calc(100vh - var(--header-height) - var(--navInfo-height));
background-color: black;
overflow: hidden;
}
.sliderWrapper::after{
content: "";
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.35);
}
.sliderText{
position: relative;
z-index: 1;
margin: 65px 0 50px;
font-family: 'Open Sans Bold', sans-serif;
}
.sliderText h1{
--hColor1: #bf1717;
--hColor2: #E73636;
background-image: -webkit-linear-gradient(to top, var(--hColor1), var(--hColor2) 50%, var(--hColor1));
background-image: linear-gradient(to top, var(--hColor1), var(--hColor2) 50%, var(--hColor1));
font-size: 30pt;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
text-align: center;
padding: 5px;
}
.sliderText h1::after{
content: "";
display: block;
height: 3px;
width: 80px;
margin: 0 auto;
background-color: var(--hColor1);
}
Here is how it looks like on pc:
And here how it looks like on mobile:
So I found that the h1::after property was doing this, but I dont know really why. I changed it to position:absolute and then to center it used left:50%; and transform: translateX(-50%); and now it works fine.
I want my svg images to be on bottom of my block (position:absolute, bottom:0). But in Internet Explorer it doesn't work (displays in the center). I can set width and height to svg and it will work somehow, but it will broke on another device with smaller/bigger screen size. How can I resolve this problem? Thank you!
Here is the code codepen
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<svg class="left" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="0,0 0,150 1300,150"></polygon>
</svg>
<svg class="right" fill="#fff" viewBox="0 0 1300 150" width="50%">
<polygon points="1300,0 0,150 1300,150"></polygon>
</svg>
</div>
You can achieve the same with using either simple divs or with pseudo elements. The following is an example I created to demonstrate both approaches.
https://codepen.io/Nasir_T/pen/oEYYob
The example uses position along with border to set the bottom design the way your want. You can use the div solution if you want to place images in it or use the pseudo solution if only want to show arrow cut in the design at the bottom.
If you want a background image, why not use a background-image??
.wrapper {
padding: 150px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
background-image: url('data:image/svg+xml,<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 52 3" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 26,3 52,0 52,3 0,3" fill="#fff" /></svg>');
background-repeat: no-repeat;
background-position: center bottom;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
</div>
This can be accomplished using CSS alone.
We can make triangle shape in CSS. Stick a triangle at the bottom of your main container. Will give the same effect.
.wrapper {
padding: 110px 20px 50px;
text-align: center;
color: #fff;
}
.main {
background-color: #000;
line-height: 48px;
position: relative;
width: 1000px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 50px solid #000;
position:absolute;
bottom:-50px;
}
svg {
position: absolute;
bottom: 0;
}
.left {
left:0;
}
.right {
right:0;
}
<div class="main">
<div class="wrapper">
<div class="text">Some text here</div>
<button>click</button>
</div>
<div class="arrow-down">
</div>
</div>
How to make a transference layer on an image which reduces the image light at the corner but not at the center of the image? I need the result exactly as shown below:
I have tried the below code:
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
<html>
<body>
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Please help to do the required change to get the required output.
An absolutely positioned pseudo-element on a wrapping div and a sem-transparent box-shadow is one method.
body {
text-align: center;
}
.wrap {
display: inline-block;
position: relative;
overflow: hidden;
margin: 1em;
}
.wrap::after {
content: '';
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
border-radius: 50%;
box-shadow: 0 0 0 200px rgba(0, 0, 255, 0.35);
z-index: 1;
}
img {
display: block;
}
<div class="wrap">
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</div>
An absolutely positioned element in a wrapping div with a radial background is another method
.img {
position: relative;
float: left;
}
img {
display: block;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, rgba(0, 0, 255, 0.5) 50%);
}
<div class="img">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="200">
<div class="overlay"></div>
</div>
</div>
You have to wrap the image in a container and put an overlay div to can achieve the desired results
.img {
width: 250px;
position:relative;
}
img{
max-width:100%;
}
.overlay{
position: absolute;
background-color:rgba(0,0,0,0.7);
background: rgba(0,0,0,0.7); /* For browsers that do not support gradients */
background: -webkit-radial-gradient(circle,transparent 50%, rgba(0,0,255,0.7) 50%); /* Safari 5.1 to 6.0 */
height:100%;
width:100%;
left:0;
right:0;
top:0;
bottom:0;
}
<html>
<body>
<div class='img'>
<div class='overlay'></div>
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</div>
</body>
</html>
I am trying to create simple slash-shape for the front page of a website and having some trouble.
I finally managed to get a reasonable result (still not happy with the responsiveness), but when running in IE 11 the slash shape extends to the bottom of the page and covers everything below it.
Here is the code:
JSFiddle
HTML
<title>title</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div id="main">
<div id="welcomediv">
<img src="img/mainlogo.png"/>
</div>
<div class="splash" id="p1">
</div>
<div class="splash">
<svg id="ting" width="100%" viewBox="0 10 200 10">
<polygon id="arrow" points="0,30 0,500 250,500 250,-80" >
</polygon>
</svg>
</div>
<div class="splash" id="p2">
</div>
<div class="splash" id="p3">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</body>
</html>
CSS
#main {
position: absolute;
width:100%;
top: 0px;
left: 0px;
overflow: hidden;
}
.splash {
height: 100vh;
width: 100vw;
float: left;
}
#p1 {
position: absolute;
left: 0px;
top: 0px;
background: black;
background-image: url(img/bgic-fd.png);
background-size: cover;
}
#p2 {
background: black;
}
#p3 {
z-index: 500;
background: green;
}
#ting {
position: absolute;
top:25vh;
height: 150vh;
}
#arrow {
fill: #fec44a;
}
#welcomediv {
position: absolute;
left: 50vw;
top: 150px;
margin-left: -15vw;
z-index: 50;
width: 30vw;
}
#welcomediv img {
width: 100%;
}
This works as expected in every other browser I've tried (Chrome Opera Firefox), but in IE 11 the yellow "#arrow" shape covers p2 and p3.
If anyone knows what is going on here I would really appreciate some guidance, thanks!
I've found how to make an image over color background but not when you have two of them. I'd like to center only one image in the middle of the screen/page and I want it to shrink with the window size.
Image example:
body {
font-family: 'Titillium Web', sans-serif;
}
#top,
#bottom {
background: url('http://uxrepo.com/static/icon-sets/zocial/svg/chrome.svg') no-repeat center center;
background-size: cover;
position: absolute;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: #ff0000;
}
#bottom {
bottom: 0;
background-color: #fff38f;
}
.header-container {
height: 130px;
width: 100%;
margin: 0 auto;
position: absolute;
top: 130px;
}
.header {
text-align: center;
line-height: 16px;
font-size: 48px;
font-weight: 400;
color: #ffffff;
}
.footer-container {
height: 130px;
width: 99%;
margin: 0 auto;
position: absolute;
bottom: 0;
}
.footer {
text-align: center;
line-height: 16px;
}
.img {
position: absolute;
width: 100%;
}
<body>
<div id="top">
<div class="header-container">
<div class="header">
SOME TITLE
</div>
</div>
</div>
<div id="bottom">
<div class="footer-container">
<div class="footer">
some text
<br>
<br>some text
<br>some text
<br>some text
</div>
</div>
</div>
</body>
Does anyone know how to make this result simple?
CSS Gradient
My approach, with a gradient background: JSFiddle
<div class="background">
<img src="source"/>
</div>
.background{
background: linear-gradient(to bottom, #db6062 0%,#db6062 50%,#db6062 50%,#dae27a 50%,#dae27a 100%);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.background img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 200px;
width: 200px;
margin: auto;
}
Svg
Since you are using an svg you can simply use that inline.
And if you put it inline like i have done here in the example below.
You can change all colors in the svg with css.
svg {
height: 100vh;
}
#rect1 {
fill: firebrick;
}
#rect2 {
fill: #229;
}
<div>
<svg viewBox="0 0 500 400">
<rect id="rect1" x="0" y="0" width="1000" height="200" />
<rect id="rect2" x="0" y="200" width="1000" height="200" />
<g transform="translate(150,100) scale(0.2)">
<path d="M0 523q0-75 23-155.5t62-144.5q62-104 182.5-163.5t248.5-59.5q130 0 249.5 81.5t182.5 201.5q50 86 50 214 0 150-71 266t-192 177-270 60q20-36 61-109.5t73.5-130.5 64.5-108l1-2q3-5 12-18.5t12.5-19.5 9.5-17 9.5-21 5.5-21q6-24 6-48 0-80-48-142l275-81q-285 0-428 1-7-1-22-1-99 0-165.5 74t-55.5 173q-2-9-2-28 0-44 15-77l-204-201 198 341q19 72 79.5 117.5t134.5 45.5q17 0 33-3l-66 276q-115 0-223-71t-175-176q-66-102-66-230zm312-19q0 77 54.5 131.5t130.5 54.5 130.5-54.5 54.5-131.5q0-76-54-130.5t-131-54.5-131 54.5-54 130.5z"
/>
</g>
</svg>
</div>