I want to make like this box shadow its from a psd file :
i have made a screenshot :
http://s3.postimg.org/k59bfo5s3/boxshadow.png
i don't know how i can make that by code of css
but my other idea I thought also to extract the shadow from PSD file like that
and moove it to my html page but i don't know where i can place the code for image of shadow
http://jsfiddle.net/4pbq2tx8/11/
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css :
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
1/
Try with that:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2/
If you want the shadow to be exact length of 1100px you need to change few things:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
And wrap your #carousel in .wrap
<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER
Your shadow looks like a 3D object, so take advantage of that, and use a 3D pseudo element with a box shadow:
#carousel {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 50%;
}
#carousel:after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: -45px;
height: 50px;
background-color: #888;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg);
box-shadow: 0 0 20px 15px #888;
}
jsFiddle
Tested on chrome. Should work on Safari too. For other browsers, you will need add their vendor prefixes, -moz-, -ms-.
Old browsers will not support 3D transformations, and that's ok. No shadow will appear.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Also, you don't need, and should not use images. You can replicate the same effect with linear gradients.
Related
I'm trying to implement this image:
Where, a div with text "Dog" is partially covering and blurring the image. So I tried this:
.profile {
background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(10px); // should do the trick but not working??
}
<body class="profile">
<div class="name">Dog</div>
</body>
As you can see, although the div has the right color/opacity, it is not blurring the part of the image it covers.
If backdrop-filter is applied on <div class="name"></div>, then shouldn't it take affect on the element behind it (which is <body class="profile">)? I'm confused as to what I am doing wrong. If anyone can point me in the right direction, I would greatly appreciate it. Thanks!
This works for me:
Change <body class="profile"> to something like <div class="profile">.
<body> is a special HTML element.
Remove opacity: 0.6. It makes the entire element translucent which isn't what you want.
Instead, change the background-color to rgba( 0, 0, 0, 0.6 ) - then the backdrop will be partially visible through this semitransparent background.
Also, I replaced width: 100% with right: 0; as width: 100% will be affected by box-sizing: which will trip you up as you work on the textual content of your HTML.
You also need to add position: relative; to .profile so that the .name's position: absolute works.
.profile {
width: 250px;
height: 250px;
position: relative;
background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: 15px;
padding-bottom: 15px;
background: rgba( 0, 0, 0, 0.6 );
backdrop-filter: blur(10px);
color: white;
text-align: center;
}
<div>
<div class="profile">
<div class="name">Dog</div>
</div>
</div>
You could set a transparent background using RGBA instead of using opacity to have the blur effect on the background. Also note that you are using an invalid order of HTML code.
The order is as follow:
<html>
<head>
<!-- All meta tags -->
</head>
<body>
<!-- All your elements such as divs, navs etc.. -->
</body>
</html>
So if we take your code, you would have something like this:
background-color: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
! For the sake of demonstration, I added position: relative to the profile class, this ensures your name element stays inside of the box. Remove that line if you are planning to copy the code below or don't want to have this.
.profile {
background: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
position: relative;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.55);
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
text-align: center;
backdrop-filter: blur(15px); // should do the trick but not working??
}
<div class="profile">
<div class="name">Dog</div>
</div>
I want to fill that empty background with color, also that background should be responsible with the image. Can be done with CSS?
You can use a background gradient(or an image), background-size, background-position and no-repeat to set it under the area of the screen.
example:
img {
background: /*linear-gradient(blue,blue)*/
/* choose the gradient for a color, see hover effect */
/* or use an image of the appropriate ratio */
url(https://i.picsum.photos/id/102/1129/751.jpg?hmac=uS-7B0eUG3Sd1mZHONp80fqhpDZ6g09ZoD7aw7l8tAo) 50% 1%/ 80% 80% no-repeat;
display: block;
margin: auto;
max-width: 70%;
filter: drop-shadow(0 0 10px silver)
}
img:hover {
background-image: linear-gradient(blue, blue);
}
html {
display: grid;
min-height: 100vh;
background: #444
}
body {
margin: auto;
}
<img src=https://i.stack.imgur.com/pu2YY.png>
filter can also be used if you want to add a shadow (or else) effect.
In the same as you used do background color using background-color property look at these image with transparent background with two different colors in the background color. the only difference is that the image you are using doesn't have the transparent background.
img {
background-image: black;
}
img{
background-color: blueviolet;
}
you want this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
position: relative;
}
.bg-color {
background-color: rgb(177, 50, 50);
height: 251px;
width: 447px;
position: absolute;
z-index: 1;
left: 168px;
top: 16px;
}
.img
{
position: absolute;
z-index: 0;
left: 8%;
}
#media (min-width:500px) and (max-width:900px){
.bg-color {
background-color: rgb(177, 50, 50);
height: 251px;
width: 452px;
position: absolute;
z-index: 1;
left: 96px;
top: 16px;}
}
#media (min-width:700px) and (max-width:1300px){
.bg-color {
background-color: rgb(177, 50, 50);
height: 251px;
width: 452px;
position: absolute;
z-index: 1;
left: 156px;
top: 16px;}
}
</style>
</head>
<body>
<div class="main">
<div class="bg-color">
</div>
<div class="img">
<img src="https://i.pinimg.com/564x/48/ce/e8/48cee83121a363a248640dbf54778d87.jpg" alt="">
</div>
</div>
</body>
</html>
I am making a large button with a blurred background image that unblurs when you hover over it. I have used a container with overflow hidden and made the margin negative on the background image so that the edges are defined.
However, when I hover over the image and it does the transition from blurred to unblurred, or vice versa, the edges of the image are no longer defined. This creates an effect where the edges of the white container underneath it will be visible. While completely blurred or completely unblurred, these edges immediately become defined again.
How can I fix this?
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-color: white;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
I think it's a browser bug.
the container background can be seen at the borders.
It can be made less visible if the container background is the same than the image. I have used inherit in the image to avoid setting it in 2 places.
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
overflow: hidden;
}
.image {
background-image: inherit;
margin: -5%;
width: 110%;
height: 110%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
The issue appears to be caused by the negative margin and 110% width and height settings in the .image css class. I assume you're doing that to try and maintain a crisp edge when blurred. I modified those and the snippet below shows the result. Hopefully it will be useful:
body {
background-color: black;
}
.container {
position: fixed;
top: 2.5vh;
left: 2.5vh;
width: 50vh;
height: 50vh;
overflow: hidden;
}
.image {
background-image: url(https://www.decorativefair.com/wp-content/uploads/2017/09/yellow-wallpaper-12-1024x640.jpg);
margin: 0;
width: 100%;
height: 100%;
filter: blur(6px);
transition: 1s;
}
.image:hover {
filter: blur(0px);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="image"></div>
placeholder text
</div>
</body>
</html>
When the card is flipped, the front face is turned to the back and hidden, however, the back face is turned but not made visible. My intention is to have whichever side of the card is front-facing made visible. I have tried a number of variations of placing the backface-visibility attribute within different classes/ids but to no avail.
Below is my current code:
body {
background-image: url("imgs/Bike-Logo.jpg");
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
background: inherit;
}
.card {
width: 350px;
height: 500px;
background: inherit;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -250px;
border-radius: 8px;
background-color: #707075;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
bottom: 0;
right: 0;
/*frosted div effect*/
background: inherit;
box-shadow: 100px 0px 20px 200px rgba(255,255,255,0.5);
filter: blur(20px);
}
.flip_card_back {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.flip_card_front, .flip_card_back {
backface-visibility: hidden;
}
.sign_up_form {
position: relative;
margin: 10%;
background-color: red;
}
.sign_in_form {
position: relative;
margin: 10%;
background-color: blue;
}
.card figure {
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Login Page</title>
</head>
<body>
<div class="container">
<div id="card">
<div class="flip_card_front">
<form>
<div class="sign_in_form">
<figure>Front</figure>
</div>
</form>
</div>
<div class="flip_card_back">
<form >
<div class="sign_up_form" >
<figure>Back</figure>
</div>
</form>
</div>
</div>
</div>
<button id="flip">Sign In -></button>
<script src="javascript.js"></script>
</body>
</html>
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/