Related
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.
Can I make part (from x1 to x2) of div border transparent?
If not what approach can you advice?
My idea [very bad] is to draw border in canvas element and place it (canvas body is trasparent) over div element.
Since DIVs have only 4 elements (top, bottom, left, right) you can't make part of a border transparent AFAIK.
However, you could create elements that would overlay your div and use relative positioning to build a border to your taste. For example:
<style>
.multiborder{
border:1px solid black;
border-top:none;
width:500px;
height:100px;
position:relative;
}
.top-border-1{
border-top:2px solid red;
width:100px;
position:absolute;
top:0px;
right:0px;
}
.top-border-2{
border-top:3px double blue;
width:300px;
position:absolute;
top:0px;
left:0px;
}
</style>
<div class="multiborder">
<div class="top-border-1"></div>
<div class="top-border-2"></div>
</div>
You can see the result at http://jsfiddle.net/Bekqu/3/.
Here are two possible ways to do this:
Required HTML will remain the same in both methods and is as follows:
HTML:
<div class="box"></div>
Method #01:
Draw the top, right and left borders with border css property.
Draw the bottom transparent border with linear-gradient css property.
CSS:
.box {
/* Following css will create bottom border */
background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
background-size: 100% 8px;
background-position: 0 100%;
/* Following css will create top, left and right borders */
border: solid #000;
border-width: 8px 8px 0;
width: 100px;
height: 50px;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
background: linear-gradient(to right, #000 30%, transparent 30%, transparent 70%, black 70%) no-repeat;
background-size: 100% 8px;
background-position: 0 100%;
border: solid #000;
border-width: 8px 8px 0;
margin: 20px 15px;
width: 100px;
height: 50px;
}
<div class="box"></div>
Method #02:
Draw the top, right and left borders with border css property.
Draw the bottom borders with :before and :after pseudo elements.
CSS:
.box {
/* Following css will create top, left and right borders */
border: solid black;
border-width: 8px 8px 0;
position: relative;
overflow: hidden;
width: 100px;
height: 50px;
}
/* Following css will create bottom border */
.box:before,
.box:after {
position: absolute;
background: #000;
content: '';
height: 8px;
width: 30%;
bottom: 0;
left: 0;
}
.box:after {
left: auto;
right: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
border: solid black;
border-width: 8px 8px 0;
position: relative;
overflow: hidden;
margin: 15px 10px;
width: 100px;
height: 50px;
}
.box:before,
.box:after {
position: absolute;
background: #000;
content: '';
height: 8px;
width: 30%;
bottom: 0;
left: 0;
}
.box:after {
left: auto;
right: 0;
}
<div class="box"></div>
I am doing website for my friend and now I don't know how to draw something in css.
I want this
I know how to draw this in "AKTUELNO", but I don't know how to create that bottom border that have longer width and skewed sides. Sorry if I didn't explain you very well, but you will understand when you see photo.
I hope you will help me :)
My workaround suggestion using gradients:
html {
height: 100%;
background-image: linear-gradient(pink, white);
}
*, *::before, *::after {
box-sizing: border-box;
}
div {
height: 150px;
width: 300px;
margin-left: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
div::before, div::after {
content: '';
display: block;
height: 149px;
width: 50px;
}
div::before {
float: left;
margin-left: -50px;
background-image: linear-gradient(-71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
linear-gradient(to top, black, black 1px, transparent 1px);
}
div::after {
float: right;
margin-right: -50px;
background-image: linear-gradient(71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
linear-gradient(to top, black, black 1px, transparent 1px);;
}
<div></div>
And here is my try to adopt the solution that was mentioned by #Harry:
body {
background: lightblue;
}
.container {
position: relative;
width: 75%;
margin: 0 auto;
background: rgba(100,100,100,.15);
height: 300px;
text-align: center;
line-height: 300px;
font-size: 3em;
}
.container::after {
position: absolute;
display: block;
content: '';
width: 100%;
height: 95%;
top: -2.5%;
padding: 0 50px;
margin-left: -50px;
border: 1px solid black;
-webkit-transform: perspective(50px) rotateX(2deg);
-moz-transform: perspective(50px) rotateX(2deg);
transform: perspective(50px) rotateX(2deg);
}
<div class='container'>
Content Goes Here
</div>
But I think that the robust solution can be achieved by using SVG.
How do I make half a hexagon shape with a border and over top a rectangle shape with a border and an image inside the half hexagon shape using CSS and HTML5
I have no code for this as I have tried but cannot figure out how to do it
I added an image of what I would like to be able to do.
You can create a trapezoid fairly easily with a rectangle and 2 CSS triangles made with some transparent borders using :before and :after.
Working Example:
body {
background: black;
}
.rectangle {
background: #ECECEC;
height: 20px;
}
.trapezoid {
width: 50px;
height: 50px;
position: relative;
margin: 0 auto;
background: #ECECEC;
}
.trapezoid:before,
.trapezoid:after {
content: '';
display: block;
position: absolute;
top: 0;
border: 25px solid transparent;
border-top-color: #ECECEC;
}
.trapezoid:before {
right: 100%;
border-right-color: #ECECEC;
}
.trapezoid:after {
left: 100%;
border-left-color: #ECECEC;
}
<div class="rectangle">
<div class="trapezoid"></div>
</div>
updated with shape and border-colors
div {
margin-top:1em;;
text-align: center;
padding: 0.5em;
border-top:1px solid lightgray;
background: linear-gradient(to bottom, #ECECEC 50%, lightgray 50%, lightgray 51%, transparent 52%);
}
img {
position: relative;
display: block;
margin: 10px auto;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
width:320px;
position: relative;
overflow: hidden;
border-top:1px solid lightgray;
background: linear-gradient(to left, lightgray, lightgray) bottom center, linear-gradient(40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom left, linear-gradient(-40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom right;
background-repeat: no-repeat;
background-size: 50% 2px, 50% 100%, 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/55/46/technics/1" alt="ico"/>
</span>
</div>
older codes
a single pseudo and overflow:hidden, can do it too:
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
}
span:before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
margin-left: -75px;
height: 150px;
width: 150px;
background: gray;
transform: rotate(45deg);
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
or a gradient (easier probably to draw borders or shadows if needed)
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
background: linear-gradient(40deg, transparent 1.5em, gray 1.5em)bottom left, linear-gradient(-40deg, transparent 1.5em, gray 1.5em)bottom right;
background-repeat: no-repeat;
background-size: 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
Here is a solution using pseudo elements with skew. The image can be overlayed without problems
.rect {
width: 100%;
height: 20px;
background-color: lightgrey;
border-bottom: 1px solid grey;
position: relative;
}
.hex {
width: 200px;
height: 40px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.hex:before, .hex:after {
content: "";
position: absolute;
width: 200px;
height: 40px;
border-style: solid;
border-color: grey;
border-width: 0px 0px 1px 0px;
transform-origin: bottom center;
background-color: lightgrey;
}
.hex:before {
transform: skew(10deg);
border-left-width: 1px;
}
.hex:after {
transform: skew(-10deg);
border-right-width: 1px;
}
<div class="rect">
<div class="hex"></div>
</div>
You can create half octagon using :after.
.halfOctagon {
width: 100px;
height: 50px;
background: #f35916;
position: relative;
top:25px;
left:50px;
}
.halfOctagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #f35916;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
you can try live example in https://jsfiddle.net/kb2tzxq4/
To move the half octagon adjust top and left in css for .halfOctagon
I am trying to achieve this:
I couldn't find anything like it, but here is my failed attempt:
#one {
width: 200px;
height: 100px;
background-color: white;
box-shadow: 0px 0px 20px #2D8DBD;
left: 50px;
display: inline-block;
margin-right: -100px;
}
#two {
width: 200px;
height: 100px;
background-color: white;
box-shadow: 0px 0px 20px #B22D2D;
left: -50px;
display: inline-block;
margin-left: -50px;
z-index: -1;
}
<center>
</br>
</br>
<div id="one"></div>
<div id="two"></div>
</center>
jsFiddle demo.
I am using bootstrap, so I don't think just making another "gradient" image would be simpler.
Also, I have tried compromising for this: http://designposts.net/fresh-free-css3-and-html5-tutorials/ but my image is circled, and so it turns out as a cut square.
You can fake one, using background gradient and a box-shadow, as well as a css pseudo element to mask the border. Note that if you change the background color of the surrounding content you have to change every instance of #444
.outer {
box-sizing: border-box;
padding: 25px;
height: 200px;
width: 200px;
box-shadow: 0px 0px 10px 10px #444 inset;
border-radius: 50%;
background: linear-gradient(to bottom right, rgb(250,50,50), rgb(50,150,250));
}
.outer::before {
content: "";
display: block;
position: relative;
left: -26px;
top: -26px;
height: 202px;
width: 202px;
border-radius: 50%;
border: 3px solid #444;
box-sizing: border-box;
}
.inner {
position:relative;
top: -204px;
left: -3px;
border-radius: 50%;
background: linear-gradient(to bottom right, #ee2135, #6279ff);
padding: 2px;
height: 150px;
width: 150px;
box-shadow: 0px 0px 30px -5px black;
}
.content {
height: 100%;
width: 100%;
background: #444;
border-radius: 50%;
}
/* Styling only past here */
html, body {
text-align: center;
padding: 0px;
margin: 0px;
height: 100%;
background: #444;
}
body::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.outer {
display: inline-block;
vertical-align: middle;
}
<div class="outer">
<div class="inner">
<div class="content">
</div>
</div>
</div>
As I understand your request, you need a border on the element that is filled with a gradient effect.
That could be get with a border-image, but then the border-radius wouldn't work.
If your inner background is black solid, that can be achieved setting different backgrounds, and playing with the zone affected by each one (with background-clip and background-origin)
In the snippet, 2 examples, one with radial gradients and the other with linear gradients
The best about that solution is that the border is still a border. You can set the width, the radius, and so on, the usual way
.test {
width: 250px;
height: 200px;
display: inline-block;
margin: 5px;
border-radius: 20px;
border: solid 10px transparent;
}
#test1 {
background: linear-gradient(black, black),
radial-gradient(circle at left top, red 30px, transparent 150px),
radial-gradient(circle at right top, blue 30px, transparent 150px),
cyan;
background-clip: content-box, border-box, border-box, border-box;
background-origin: content-box, border-box, border-box, border-box;
}
#test2 {
background: linear-gradient(black, black),
linear-gradient(to bottom right, red 30px, transparent 150px),
linear-gradient(to bottom left, blue 30px, transparent 150px),
cyan;
background-clip: content-box, border-box, border-box, border-box;
background-origin: content-box, border-box, border-box, border-box;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You may be able to do this with a single element, in conjunction to a pseudo element to act as the border. This may have a higher browser compatibility than border-image.
mock up demo
html,
body {
margin: 0;
padding: 0;
}
html {
background: #222;
}
div {
height: 200px;
width: 200px;
background: gray;
position: relative;
border-radius: 10px;
margin: 20px auto;
}
div:before {
content: "";
position: absolute;
top: -5%;
left: -5%;
border-radius: inherit;
height: 110%;
width: 110%;
z-index: -1;
background: linear-gradient(to bottom right, rgba(250, 50, 50, 0.5), rgba(50, 150, 250, 0.5)), linear-gradient(to bottom left, blue 30px, transparent 150px);
box-shadow: inset 0 0 10px 5px #222;
}
<div></div>
This is done with just CSS Grid, no JavaScript. Check it out and see if this is what you are looking for
https://codepen.io/dszlauer/pen/RLjwZq?editors=1100#
<html>
<body>
<div class="grid">
<div class="blurBox"></div>
<div class="inputBox">
<div class="fName">f</div>
<div class="lName">l</div>
</div>
</div>
</body>
</html>
body {
background-color: black;
color: white;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
grid-gap: 20px;
//border: 1px solid white;
}
.blurBox {
grid-row: 1 / 1;
grid-column: 1 / 1;
background: linear-gradient(-45deg, red, blue);
filter: blur(5px);
border-radius: 5px;
}
.inputBox {
grid-row: 1 / 1;
grid-column: 1 / 1;
margin: 7px;
background: black;
border: 1px solid white;
border-radius: 5px;
z-index: 1;
}
.fName {
margin: 20px;
border: 1px solid white;
}
.lName {
margin: 20px;
border: 1px solid white;
}