I need to squash a div in vertically, using css3, the div need to have 100% width to fit in full window, but i don't know how. Thanks.
http://i.stack.imgur.com/vqUs8.png
(Updated, due to the request with an image behind the <div>)
A possible way if the background has only one color (white in this case)
div {
background-color: #000;
height: 200px;
margin: 40px 0 0;
position: relative;
overflow: hidden;
width: 100%;
}
div::before,
div::after {
border-radius: 140px / 20px;
content: "";
display: block;
height: 100px;
position: absolute;
width: 100%;
}
div::before {
box-shadow: 0 50px 0 10px #FFFFFF inset;
bottom: -80px;
}
div::after {
box-shadow: 0 -50px 0 10px #FFFFFF inset;
top: -80px;
}
http://jsfiddle.net/kmjLqrq2/
The css above uses two pseudoelements to make two ellipses above the <div>.
The problem now, if we have a background-image hiding behind the <div> is that our two ellipses will overlap our image.
Enter radial-gradient:
We can change our two pseudoelements now and give them an transparent ellipse as a background-image which will "fade" to black.
div::before,
div::after {
background-size: 100% 50px;
background-repeat: no-repeat;
content: "";
display: block;
height: 25px;
position: absolute;
width: 100%;
}
div::before {
background-image: -webkit-radial-gradient(center center, ellipse cover, rgba(0,0,0,0) 75%, #000 76%);
background-position: center bottom;
top: -25px;
}
div::after {
background-image: -webkit-radial-gradient(center center, ellipse cover, rgba(0,0,0,0) 75%, #000 76%);
background-position: center top;
bottom: -25px;
}
http://jsfiddle.net/kmjLqrq2/1/
(Note that the example above is only for Webkitbrowsers to keep it simple, please remember to use all vendor prefixes)
Related
I have this:
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 50%, transparent 50%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
I found the pen online, and want to adjust it for my own usage, however, cannot figure out a few things.
I want to move the blue box lower, so it is not as high, but still keep the same shape. So I tried background position, as one would, and it doesn't change anything. I'm relatively an amateur in css so it is probably a silly question, but a question none the less! Appreciate the help
It's because that shape is made with linear gradient as background, so you just need to adjust gradient percentages:
From
background: linear-gradient(25deg, yellow 50%, transparent 50%);
to
background: linear-gradient(25deg, yellow 20%, transparent 20%);
.test {
width: 400px;
height: 400px;
background-color: white;
display: inline-block;
background-size: 100px 30px;
background-repeaT: no-repeat;
background-position: center 30px, center center, center 140px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(25deg, yellow 20%, transparent 20%);
mix-blend-mode: difference;
transition: all 1s;
}
<div class="test one"></div>
I want to stack two colors one on top of the other. I did it by creating and sovrapposing two divs, having the one on the top with an opacity of 60%.
I wonder if there's a simpler way requiring only one div with two colors or maybe just one color that is a mix of the two.
I post here my code, If you notice any bad practice let me know please. I am eager to improve my skills.
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
/* ~~~~~~~~~~SKY~~~~~~~~~~ */
#sky {
position: relative;
z-index: -100;
width: 100vw;
height: 100vh;
background-image: linear-gradient( to top, midnightblue, black);
}
/* ~~~~~~~~~~MOON~~~~~~~~~~ */
.moon {
position: absolute;
top: 3%;
right: 0%;
width: 200px;
height: 200px;
border-radius: 50%;
}
#dark-moon {
background-color: silver;
}
#light-moon {
background-color: goldenrod;
background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
opacity: 60%;
}
/* ~~~~~~~~~~SEA~~~~~~~~~~ */
#sea {
position: absolute;
bottom: 0%;
width: 100vw;
height: 25vh;
background-color: #48B;
}
<div id="sky">
<div id="dark-moon" class="moon"></div>
<div id="light-moon" class="moon"></div>
</div>
<div id="sea"></div>
As you can see there's a golden moon over a silver one. How can I get the same result having only one moon?
You can do it with 0 elements using pseudo element and multiple backgrounds:
html {
min-height: 100%;
background: linear-gradient( to top, midnightblue, black);
}
html::before {
content:"";
position: absolute;
top: 3%;
right: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(rgba(192,192,192,0.4) 0 0),
radial-gradient(dimgrey 20%, transparent 16%),
radial-gradient(dimgrey 15%, transparent 16%) 30px 30px,
goldenrod;
background-size: 60px 60px;
}
html::after {
content:"";
position: absolute;
bottom: 0;
left:0;
right:0;
height: 25vh;
background: #48B;
}
Another fancy idea to optimize the code more:
html {
min-height: 100%;
background:
linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
linear-gradient(black,midnightblue);
}
html::before {
content:"";
position: absolute;
top: 3%;
right: 0;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
linear-gradient(rgba(192,192,192,0.4) 0 0),
radial-gradient(dimgrey 20%, transparent 16%) 0 0 /60px 60px,
radial-gradient(dimgrey 15%, transparent 16%) 30px 30px/60px 60px,
goldenrod;
}
Another option that only involves setting one background property would be to "stretch and displace" a linear-gradient in such a way that the result is a single color.
--base-col and --blend-col defines the gradient, --blend-amount sets the color mix, and --stretch-factor determines how much stretch is applied to the gradient:
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
/* ~~~~~~~~~~SKY~~~~~~~~~~ */
#sky {
position: relative;
z-index: -100;
width: 100vw;
height: 100vh;
background-image: linear-gradient( to top, midnightblue, black);
}
/* ~~~~~~~~~~MOON~~~~~~~~~~ */
.moon {
position: absolute;
top: 3%;
right: 0%;
width: 200px;
height: 200px;
border-radius: 50%;
}
#dark-moon {
--blend-amount: 60%;
--base-col: silver;
--blend-col: goldenrod;
--stretch-factor: 100;
background: linear-gradient(
var(--base-col) calc(( 0% - var(--blend-amount)) * var(--stretch-factor)),
var(--blend-col) calc((100% - var(--blend-amount)) * var(--stretch-factor))
);
}
#light-moon {
background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
/* ~~~~~~~~~~SEA~~~~~~~~~~ */
#sea {
position: absolute;
bottom: 0%;
width: 100vw;
height: 25vh;
background-color: #48B;
}
<div id="sky">
<div id="dark-moon" class="moon"></div>
<div id="light-moon" class="moon"></div>
</div>
<div id="sea"></div>
You can try to get the hex code for the mixed color first using online color mixer tool such as this one https://colordesigner.io/color-mixer. After that you can use the result color in one div.
The code below will create an arrow right below an <a> element:
JSFiddle
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
Hello!
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
How to make a responsive triangle percent based?
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (resize the result window to see how it reacts)
The triangle maintains it's aspect ratio with the padding-bottom property.
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
Hello!
For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
DEMO
Written with SCSS for ease.
.outer {
background: orange;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
p {
margin: 0;
text-align: center;
color: #fff;
}
&:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: orange;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradient background, like this, (fiddle):
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 50%;
height: 10px;
background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}
.btn:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 50%;
height: 10px;
background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
A modified version of the below code can help you to achieve this
HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
For further reading on responsive triangles: CSS triangles made responsive
(archived link)
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
html, body{
height:100%;
width:100%;
}
.outer{
width:20%;
height:25%;
background:red;
position:relative;
}
.inner{
height:100%;
width:100%;
background-color:red;
}
.triangle-down{
height:25%;
width:100%;
position:relative;
}
.triangle-down svg{
height:100%;
width:100%;
position:absolute;
top:0;
}
svg .triangle-path{
fill:red;
}
<div class="outer">
<div class="inner"></div>
<div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
<g>
<path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
</g>
</svg>
</div>
Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
https://jsfiddle.net/29k4ngzr/
<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
.triangle-wrapper-100 {
width: 100%;
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.triangle-right {
right: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
}
.triangle-left {
left: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
transform: scaleX(-1);
}
I took #Probocop's answer and come up with the following:
<style>
.btn {
background-color: orange;
color: white;
margin-bottom: 50px;
padding: 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.btn:after {
background-color: inherit;
clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
content: '';
height: 50px;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
</style>
Hello!
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
box-sizing: content-box;
How to set two images in single background-image? I have two pictures but there is an issue with separating this two (one is overlying on another).
Below is my style for that div.
.layout_core_menu_logo {
padding: 20px 0 0px 0;
background: url(~/application/xxx.gif) transparent no-repeat top;
background-size: 968px 200px;
a {
background: url("/application/xx1.gif?c=573") no-repeat,url("/application/themes/xx2.gif")no-repeat;
width:1160px;
height: 187px;
display: block;
text-indent: -9999px;
position: relative; top: 20px; left: 0px;
}
}
You need to specify the position and background size of each image.
.layout_core_menu_logo {
padding: 20px 0 0px 0;
background: url(http://www.mvploops.com/files/_willow/categories/281_Sample- Packs.jpg) transparent no-repeat top;
background-size:100% 100%;
}
a {
background: url("http://www.detailinggurus.com/images/sample_bottles.jpg") no-repeat top left,url("http://www.mclub.com.ua/images/alb/cover42163_148565.jpg")no-repeat top right;
background-size:50% 100%, 50% 100%;
width:968px;
height: 187px;
display: block;
text-indent: -9999px;
position: relative; top: 20px; left: 0px;
}
Sample Fiddle
<style>
a {
background:url("/application/xx1.gif?c=573&c=573") no-repeat scroll 51% 60%,
url("/application/xx2.gif?c=573") no-repeat scroll 0% 20% transparent ;
}
<style>
Presently I am working on different types of triangle shapes by using border-bottom, border-top, border-left, border-right. Up to this I am getting OK with background color.
But I need to get this shapes by placing background images(without cutting any background images). I tried to do this by using border but no luck.
Example for this
You have 2 ways to get this effect:
The first one is supported only in WebKit, and you will need only one div.
The second one is supported in all modern browsers, but your HTML is less clean, and needs a helper div.
In the code below, test is the first example and test2 and inner2 the second example:
.test {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
display: inline-block;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
-moz-clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
}
.test2 {
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
overflow: hidden;
display: inline-block;
}
.inner2 {
position: absolute;
width: 140%;
height: 100%;
left: 0px;
top: 0px;
-webkit-transform: rotate(37deg);
-webkit-transform-origin: top left;
transform: rotate(37deg);
transform-origin: top left;
overflow: hidden;
}
.inner2:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-transform: rotate(-37deg);
-webkit-transform-origin: top left;
transform: rotate(-37deg);
transform-origin: top left;
}
<div class="test"></div>
<div class="test2"><div class="inner2"></div></div>
JSFiddle
The first example uses clipping to get the image cut in triangle shape (only the front image, the other remains rectangular).
The second example uses overflow hidden and a rotation to get the triangular shape. Then, you need the opposite rotation to get the image straight.
In the first example, you can do almost whatever shape you want. For instance,
-webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%);
gives you this:
.test {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
display: inline-block;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%);
}
<div class="test"></div>
JSFiddle