Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
so im trying to make an infographic to a website im making and i want to make a gradient that has a line on top like in this image: https://ibb.co/e8xmCk where there is a gradient and a line on top of it with a diffrent color and that to be a background of a specific place. thanks a lot!
I was really unable to understand your question actually, but
nevertheless I have made a solution that you want like..
.container {width: 100%; height: 200px; background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); position: relative; box-sizing: border-box; z-index: 1;}
.container:before {display: block; content: ""; height: 10%; width: 100%; background: red; position: absolute; top: 0px; left: 0px; z-index: -1;}
h1 {font-family: Arial; font-size: 49px; font-weight: bold; color: #fff; text-align: center; margin: 0px;}
<div class="container">
<h1>This is text here..!</h1>
</div>
And another is here...
.container {width: 100%; height: 200px; background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); position: relative; box-sizing: border-box; z-index: 1; overflow-y: hidden;}
.container:before {display: block; content: ""; height: 10%; width: 100%; background: red; position: absolute; top: 0px; left: 0px; z-index: -1;}
.side-panel {height: 100%; width: 30%; position: absolute; top: 0px; left: -10%; background: #2493a4; z-index: -2; transform: skew(20deg);}
h1 {font-family: Arial; font-size: 49px; font-weight: bold; color: #fff; text-align: center; margin: 0px;}
<div class="container">
<div class="side-panel"></div>
<h1>This is text here..!</h1>
</div>
Related
I've made a divider for my site and it works perfectly! I'm just having trouble with adding a little box on top of my divider as shown in the picture, any help would be appreciated!
.divider {
width: 2px;
background: linear-gradient(90deg, rgba(6,144,45,1) 0%, rgba(6,144,45,0.0032387955182072714) 87%);
height: auto;
min-height: 5vh;
margin-right: 25px;
}
<div class="divider"></div>
The box on the divider should look like this
You can achieve this by using the pseudo-element ::before.
.divider::before {
content: '';
display: block;
position: relative;
background-color: black;
width: 8px;
height: 8px;
top: 0;
left: -2px;
}
.divider {
background-color: black;
width: 4px;
height: 60px;
}
<div class="divider"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I would like to create a transition effect on hover that is similar to the large "start voting" button on this website but, while I am familiar with css transition effects, I dont know how to create that one in particular. Thank you for taking the time to read this.
You can use a background-size transition:
a {
position: relative;
display: inline-block;
padding: 12px 80px;
border: 2px solid #BDAA67;
color: white;
font-size: 30px;
text-decoration: none;
background-color: black;
background-image: linear-gradient(#BDAA67, #BDAA67);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: background-size .3s, color .3s;
}
a:hover {
background-size: 100% 100%;
color: #000;
}
<a href="#" class="button">
CLICK ME!
</a>
{content: "";
background-color: #bdaa67;
height: 0%;
width: 50%;
position: absolute;
left: 25%;
transition: all .15s ease-in-out;
top: 48%;
z-index: -1;}
Try this
Add the following lines of code to your HTML,
<button class="custom-btn">Start now</button>
Add the following lines of code to your custom.css. This will give the exact style on hover for the button. You can minimise the code if you are willing to use bootstrap. Here we have custom styled the button from scratch.
.custom-btn {
font-size: 25px;
padding: 32px 105px;
text-shadow: none;
border: 2px solid #000;
background: #000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
position: relative;
z-index: 1;
transition: all .33s ease-in-out;
}
.custom-btn:hover {
border: 2px solid #bdaa67;
color: #000;
}
.custom-btn::before {
content: "";
background-color: #bdaa67;
height: 0%;
width: 50%;
position: absolute;
left: 25%;
transition: all .15s ease-in-out;
top: 48%;
z-index: -1;
}
.custom-btn:hover::before {
height: 100%;
width: 100%;
left: 0;
top: 0;
}
<body>
<button> START VOTING </button>
</body>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: red;
}
button {
position: absolute;
padding: 40px 120px;
font-weight: bold;
border: 0;
color: #fff;
font-size: 2em;
text-transform: uppercase;
background: #000;
z-index: 1;
}
button::before {
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #bdaa67;
transform: scale(0);
transition: 0.3s;
z-index: -1;
}
button:hover:before {
transform: scale(1);
}
button:hover {
border: 3px solid #bdaa67;
color: #000;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm having a problem to make s curve in my footer
anyone can help me to make a footer like this:
according to css skew element and get inner rounded border top this could be a solution for you:
.footer {
height: 100px;
position: relative;
overflow: hidden;
background-color: green;
}
.content {
position: absolute;
top: 40%;
left: 5px;
}
.footer:before,
.footer:after {
content: "";
vertical-align: top;
display: inline-block;
transform-origin: top right;
transform: skew(-40deg);
}
.footer:before {
height: 100%;
width: 50%;
border-radius: 0 0 40px 0;
background: lightgrey;
}
.footer:after {
height: 40px;
width: 40px;
margin-left: -1px;
background: radial-gradient(circle at bottom right, transparent 68%, lightgrey 70%);
}
<div class="footer"><div class="content">text goes here</div></div>
Try this
:root {
--bg-color: #12633a;
--fg-color: #eaeaea;
--radius: 80px;
}
.container {
display: flex;
}
.left {
background: var(--fg-color);
height: 250px;
flex-grow: 1;
}
.right {
background: var(--bg-color);
height: 250px;
flex-grow: 1;
}
.clip {
width: 300px;
overflow: hidden;
}
.d {
display: flex;
background: var(--fg-color);
justify-content:center;
width: 500px;
margin-left:-100px;
}
.d1 {
background: var(--fg-color);
height: 250px;
width: 250px;
border-bottom-right-radius: calc(var(--radius));
transform: skewX(-30deg);
}
.d2 {
background: var(--bg-color);
}
.d3 {
background: var(--bg-color);
height: 250px;
width: 250px;
border-top-left-radius: var(--radius);
transform: skewX(-30deg);
}
<div class="container">
<div class="left"></div>
<div class="clip">
<div class="d">
<div class="d2"><div class="d1"></div></div>
<div class="d3"></div>
</div>
</div>
<div class="right"></div>
</div>
This question already has answers here:
Wavy shape with css
(7 answers)
Closed 4 years ago.
I want to replicate an image effect. On this page https://inventi.studio/en you can see some div containers with "waves". The curved effect is achieved by uploading an image as a background.
So this is what I currently have
#box {
height: 200px;
background-image: linear-gradient(135deg, #47b784, #009d90 26%, #00818e 50%, #25647b 74%, #36495d);
}
<div id="box">
</div>
<div id="page">
Content starts here
</div>
and this is what I tried to achieve
#wave {
position: relative;
height: 70px;
width: 600px;
background: #47b784;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #47b784;
left: 0;
top: 27px;
}
<div id="wave">
</div>
<div id="page">
content starts here
</div>
but as you can see the div below the curved div gets covered. I am trying to achieve this effect with one single div container that is not overlapping other ones.
How can I achieve this with one div container and no image as a background?
Can you not just add padding top to page equal to the top of the wave before?
#wave {
position: relative;
height: 70px;
width: 600px;
background: #47b784;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: 0;
top: 39px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #47b784;
left: 0;
top: 27px;
}
#page {
padding-top: 40px;
}
<div id="wave">
</div>
<div id="page">
content starts here
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I made a slider with pure css and I want to set the background opacity of each background-image (so, that I can give it a nice fade animation). I know that I could use css generated content to add image using opacity: 1; property but I have a lot of css code so is there any easy way to get around this??
without any generated content or psuedo-elements??
/************ SLIDER ************/
/*this contains the slides which are inside a wrap*/
#slide-Panel{
width: 100%;
height: 40%;
overflow: hidden;
}
/*this contins the slides*/
.wrap{
position: relative;
width: 100%;
height: 100%;
background: #000;
text-align: center;
overflow: hidden;
}
.slide{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
background: #000;
background-repeat: no-repeat;
background-position:50% 50%;
background-size: cover;
padding: 2em 2em;
color: white;
font-size: 1em;
}
.slide a {
background: #0FCABF;
padding: .6rem 1.6rem;
color: white;
font-weight: 700;
margin: 1rem;
}
.wrap input[type="radio"]{
position: absolute;
z-index: 200;
bottom: 10%;
left: auto;
right: auto;
}
.wrap input[type="radio"]:nth-of-type(1){
margin-left: -1.2rem;
}
#slider-2-trigger{
margin-left: .4rem;
}
.slide-two{
background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/35VYJ0NK0V.jpg');/*change the opacity of these images*/
}
.slide-one{
background-image: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?crop=entropy&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1175');/*change the opacity of these images*/
}
[id^="slider"]:checked + section {
z-index: 100;
left: 0;
}
.slide :not(img){
display: none;
}
.slide img{
opacity: .6;
width: 220px;
height: 148px;
margin: 2em auto;
}
There is no direct way to change the opacity of a background image.
But here's a workaround, please try this.
Here's the code you should use:
div::after {
content: "";
// Add your background image here
background: url("https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg");
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
And the JSFiddle to it.