I keep trying to accomplish a transparent gradient effect (thinking about white) around an image background, absolutely positioned maybe?, you can imagine what I'm talking about seing my explanatory paint.
You can create radial gradients in css with the radial-gradient function and make your elements rounded with border-radius.
.transparent-gradient {
width: 300px;
height: 300px;
border-radius: 50%;
display: inline-block;
position: relative;
overflow: hidden;
}
.transparent-gradient img {
min-width: 100%;
min-height: 100%;
vertical-align: middle;
}
.transparent-gradient::after {
content: "";
background-image: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="transparent-gradient">
<img src="https://images.unsplash.com/photo-1530279281203-4c60af01ee58?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=02b66d237286bcb2a071ed6c1e72adf3&auto=format&fit=crop&w=1950&q=80" width="400">
</div>
Related
please how do I set a linear-gradient to a text-decoration-color property in css. I've been trying to implement it but it's not working
[what I actually wanted it to look like](https://i.stack.imgur.com/QDKhi.jpg)
p{
background-image: linear-gradient(90deg,rgb(98,60,49)0,rgb(255,255,255) 100%);
background-repeat: no-repeat;
background-position-y: bottom;
background-size:100% 15%;
width:fit-content;
}
<p>This is text with a gradient decoration</p>
Something like this could work. Backgrounds should be your friend in this situation.
The best way (in my opinion) is a ::before or just a div to do the same effect. Ex:
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
p {
position: relative;
font-size: 40px;
}
p::before {
content: "";
position: absolute;
top: 100%;
width: 100%;
left: 0;
height: 5px;
border-radius: 2px;
background: linear-gradient(111.3deg, #9c27b0 9.6%, #00bcd4 93.6%);
}
<div class="container">
<p>I love CSS</p>
</div>
Reference
I need to make an effect using HTML and CSS only with a circle image surrounding another image.
Here is what I'm trying to achieve:
On this example, the circle is an SVG image. The center image is a PNG with a border-radius.
I think the best way would be to use the top half of the main image as a mask for the circle image. I looked for the mask and the clip-path properties, but without success.
Here is my code so far:
<div class="main-image">
<div class="image-container">
<img src="uploads/main_image.png">
</div>
<div class="outline-circle"></div>
</div>
.image-container {
position: relative;
border-radius: 9999px;
overflow: hidden;
img {
width: 30vw;
max-width: 500px;
}
}
.outline-circle {
position: absolute;
top: 0;
left: 0;
background-image: url(../img/circle_1.svg);
height: 100%;
width: 600px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
But with this code, the circle is simply positioned on top of the image:
Thanks for your help,
You can try like below:
.box {
display: inline-block;
position: relative;
margin: 10px 50px;
transform-style: preserve-3d; /* this is important */
}
.box:before {
content: "";
position: absolute;
inset: auto -40px;
aspect-ratio: 1;
border-radius: 50%;
border: 5px solid;
border-color: blue green red blue;
transform: rotate(16deg) rotateX(41deg); /* play with this */
}
img {
border-radius: 999px;
}
<div class="box">
<img src="https://picsum.photos/id/1069/200/300">
</div>
I want to make a responsive slanted div such that the output will be as required output
plz help.
Try with this skew.
body {
height: 100vh;
margin: 0;
background: orange;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: blue;
transform: skew(296deg);
transform-origin: top;
}
<body>
<div>
</div>
</body>
You can use a linear-gradient background, specifying direction right bottom. That will adjust to different aspect ratios.
Here's a simple example:
* {
margin: 0;
padding: 0;
}
.bg {
background-image: linear-gradient(to right bottom, blue 0 50%, navy 50% 100%);
height: 50vh;
width: 100vw;
}
<div class="bg"></div>
I am trying to make something like this...
where the blue is the div, and the black is the logo. how is something like this achieved? I was messing around with the transform but this also does one side.
This is a great opportunity to use CSS shapes!
If you think of the blue shape as "a blue rectangle that is immediately followed by a blue downward-pointing triangle, with no gap between them", then we just need to figure out how make that triangle and put it in the right place.
Let's start with your current HTML & CSS (I'm basing this on the screenshot, and assuming the logo element is outside the blue <div>):
.pointy {
background-color: #0086FD;
height: 285px;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-30%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
No need to modify your HTML here. We're going to use the :after pseudo element to add the triangle shape after the div.
I used the handy CSS Triangle Generator to get a triangle started using border properties.
A few other details:
adding position: relative to the div, so that...
we can position the triangle at the bottom with position: absolute and top: 100%
we're applying width: 100vw to the div, because...
since the triangle is created using borders, and borders can't be a percentage width, we can set the two relevant border widths to 50vw, and they'll be exactly half the width of the 100vw parent
Let's make the triangle red for the moment, so you can see it clearly.
.pointy {
background-color: #0086FD;
height: 285px;
position: relative;
width: 100vw;
}
.pointy:after {
border-color: #f00 transparent transparent transparent;
border-style: solid;
border-width: 50px 50vw 0 50vw;
content: '';
display: block;
height: 0;
position: absolute;
top: 100%;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-30%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
Final solution
Now that we have created and positioned our triangle, let's make it the same color as the div. (I've also tweaked the vertical positioning of .logo to achieve the desired effect.)
Voila: pointy blue div, no extra HTML needed.
.pointy {
background-color: #0086FD;
height: 285px;
position: relative;
width: 100vw;
}
.pointy:after {
border-color: #0086FD transparent transparent transparent;
border-style: solid;
border-width: 50px 50vw 0 50vw;
content: '';
display: block;
height: 0;
position: absolute;
top: 100%;
}
.logo {
background-color: #000;
height: 200px;
margin: 0 auto;
transform: translateY(-20%);
width: 200px;
}
<div class="pointy"></div>
<div class="logo"></div>
Hi how do i force wpdemos_wrapper div to be basing his height to the content? If i remove the height 900px the 2nd background wont appear.
div.wpdemos_wrapper
{
position: relative;
min-height:100%;
padding:0 0 20px;
background-image: url("./images/body/bg_honeycomb_top.png");
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
width: 100%;
z-index: 0;
height: 900px;
}
div.wpdemos_wrapper:before
{
position: absolute;
content: "";
background-image: url("./images/body/bg_honeycomb_bottom.png");
background-repeat: no-repeat;
background-position: bottom center;
background-size: contain;
width: 100%;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
I think it would be much easier to apply the bg_honeycomb_top.png image to the :before pseudo-element and then apply the bg_honeycomb_bottom.png image to the main div.wpdemos_wrapper. The :before pseudo-element appears before the content in the div, so it is much easier that way. :) You can then remove the fixed height on the main div and clean it up a bit.
Sample code
This will allow you to repeat the background images across the entire width of the top and bottom of the div. This is using repeat-x for the images but you can change it to contain if you're wanting. :)
div.wpdemos_wrapper {
padding:0 0 20px;
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_bottom.png") repeat-x bottom center;
}
div.wpdemos_wrapper:before {
display: block;
content: " ";
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_top.png") repeat-x top center;
height: 20px; /* height of the background image */
width: 100%;
}
you may be able to use display: table on div.wpdemos_wrapper and corresponding display: table-cell on its children? Then the wrapper will always be the same height as their children even without an explicit height.
this is my new code nerwood. It is now working fine with height issues. However the top background wont appear..
div.wpdemos_wrapper {
position: relative;
padding:0 0 20px;
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_bottom.png") no-repeat bottom center/contain;
width: 100%;
}
div.wpdemos_wrapper:before {
position: absolute;
content: "";
background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_top.png") no-repeat top center/contain;
width: 100%;
}