I'm trying to get this cloud-like/gaussian blue effect, but I can't quite get it. I've tried using drop shadows with the same background color but it's not exactly right. Anyone know how to do it?
The given image doesn’t look so much like a CSS drop shadow as mentioned in the question, more like an image put in an element on top of which is a div with something like a linear gradient, or even multiples of these, semi transparent.
This sort of thing
background-image: linear-gradient(to bottom right, rgba(0,0,0,0.5),rgba(255,255,255,0.5));
But more sophisticated. Playing around with tones and opacities and positioning is probably the only way to get exactly what is wanted, the good thing about linear gradients being they let you do that.
I'm using a pseudo-element of the .splash container, makes it smaller than it's parent. On that pseudo-element, I have a partially transparent background and a box-shadow.
I do need to place all children of said container on top of the pseudo-class.
As you can see, the background begin to fade before the edge of the parent element that contains all text.
section {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: #121212
}
.splash {
--splash-background-color: rgba(255, 255, 255, 0.3);
--splash-background-size-decrement: 60px;
position: relative;
z-index: 2;
}
.splash > * {
position: relative;
z-index: 1;
}
.splash::before {
content: '';
position: absolute;
left: var(--splash-background-size-decrement);
right: var(--splash-background-size-decrement);
top: var(--splash-background-size-decrement);
bottom: var(--splash-background-size-decrement);
background-color: var(--splash-background-color);
box-shadow: 0px 0px 50px 60px var(--splash-background-color);
}
<section>
<div class="splash">
<h1>Some text here</h1>
<p>Some text here. Some text here</p>
<p>Some text here. Some text here</p>
</div>
<section>
You can achieve this using the SVG image. You can add SVG image in CSS file or you can add SVG code in HTML file. I am not able to attach SVG file here.
This is the final output.
<style>
body{
/*background-image: url("#"); Add background Image*/
background-repeat: no-repeat;
background-size: 100%;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 800px;
max-height: 800px;
}
.container{
width: 800px;
height: 800px;
/*background-image: url(".svg");*/
/*or .svg code in html file*/
background-repeat: no-repeat;
}
</style>
<body>
<div class="container"></div>
</body>
Related
I was trying to make uber's site.I want to add space between background image and div.
I tried using margin , padding and top 50% but none of them worked.I just want to add space from top
Html
<header id="main-image">
<div class="main-navigation">
</div>
</header>
Css
#main-image {
background: url(/images/earn_2x.webp);
width: 100vw;
height: 100vh;
z-index: -55;
}
.main-navigation {
width: 80%;
margin: auto;
height: 200px;
background: #fff;
}
Try background-position. This works only when background image is not set in repeat mode.
For eg:
background-position-y: 10px;
background-repeat: no-repeat;
This will add 10px space from top.
Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.
Current Code:
HTML:
<div class="wrapper">
<div class="container"></div>
</div>
CSS:
.container{
min-height: 10000px;
background-image: url(background1.png), url(background2.png);
background-repeat: no-repeat, repeat-y;
background-position: center top, center 1000px;
}
The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.
NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.
If you set a background to repeat, it can not be limited (AFAIK)
the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)
.test {
width: 300px;
height: 600px;
border: solid black 1px;
position: relative;
}
.test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 200px;
background-image: url(http://placekitten.com/g/600/400);
background-repeat-y: repeat;
}
<div class="test"></div>
Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension
I'm creating a website for a client - I have yet never experienced problems that I could not fix, but after 3 hours of trying and searching, I decided to ask here.
So, I have made a mockup in Photoshop.
Desired design
The grid is my main content/center of the page, but I want to have the header only fit from left (0px) to the end of my grid container, and also have a "tip" at the end (the arrow)
I decided to use a 1x99px background for the whole background and the actual image for the tip, mainly to avoid spending too much data on the image (as the page will contain tons of images)
I have given it a shot, and did some HTML/CSS, but it either ended in a wrong layout (the header grid-container being wrongfully placed), shadows overlaying or the tip exceeding the grid-container.
My header:
<div class="header_bg"></div>
<header>
<div class="header-content">
<div class="grid-container">
asdads
<div class="header_arrow"></div>
</div>
</div>
</header>
My CSS:
header {
height: 99px;
overflow: hidden;
width: calc(50% + 50%);
position: relative;
}
.header_arrow {
background: url(images/header_arrow.png) no-repeat;
width: 144px;
height: 99px;
float: right;
margin-right: -156px;
}
.header_bg {
background: url(images/header_bg.png) repeat-x;
height: 99px;
position: absolute;
width: 50%;
}
header .grid-container {
height: 99px;
background: url(images/header_bg.png) repeat-x;
}
How it appears:
Current design
With the red boxes being grid-container
It's almost what I'm looking for, but I want the end/tip to be inside the grid-container and the shadows to stop overlaying.
Any ideas? Thanks you so much!
You could give the .grid-container a right margin equal to the width of the .header_arrow, and make the right margin of that equal to its width
header .grid-container {
height: 99px;
background: url(images/header_bg.png) repeat-x;
margin-right:144px;
}
.header_arrow {
background: url(images/header_arrow.png) no-repeat;
width: 144px;
height: 99px;
float: right;
margin-right: -144px;
}
This is a page that uses a carousel (I believe flexslider). The images in this carrousel are NOT background images. I need to add a gradient to the image, going from the bottom up, and from dark to zero opacity, so that I can make the text more legible. Is this possible?
http://hungersolutionsny.magadev.net
Personally I am not a big fan of adding markup just for styling. I would go for a pseudo element :before or :after
The code would look something like this:
HTML
<div class='slideshow-wrapper'>
<img src='http://www.placekitten.com/800/300'/>
<h2 class='title'>Some title</h2>
</div>
CSS
.slideshow-wrapper {
position:relative;
float: left;
}
.title {
position: absolute;
left: 0;
right: 0;
text-align: center;
z-index: 2;
}
.slideshow-wrapper:before {
content: '';
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
z-index: 1;
}
And an example: http://jsfiddle.net/VrGeM/
Overlay the image with an absolutely positioned <div> that's the same size as the slider. Give that <div> the gradient. Ensure that it's above the images but below the text on top of the images.
It's also pretty easy to create a transparent PNG to use rather than a CSS gradient, which will have the advantage of working in older versions of IE.
The way I ususally do this is via an absolutely-positioned DIV which sits on top of the images and contains the text. Then I give that an opacity like so:
background-color: rgba(0, 0, 0, 0.56);
If you want a gradient with opacity, this is a good tool which makes that easy: http://www.colorzilla.com/gradient-editor/
There are a number of ways to tackle this. Mainly targeting the background CSS property. If you're looking to target the text that is overlapping the image you could use something simple like this:
body.front #region-content #flexslider-1 ul.slides .views-field-field-banner-statement {
background-color:rgba(0, 0, 0, 0.5);
}
It doesn't apply a gradient but it does supply a black background with 50% opacity.
I usually don't use a gradient in this way... when faced with this problem in the past I have always used an inset box-shadow on a div wrapped around the image. Something like this...
<div class="img-wrap">
<img src="" />
</div>
And then in CSS apply the box-shadow to a pseudo selector...
.img-wrap {
display: block;
position: relative;
}
.img-wrap:before {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 -100px 80px 0px rgba(0,0,0,0.4);
}
img {
display: block;
width: 100%;
height: auto;
}
Check out this CodePen if you want to see it live... http://cdpn.io/qGwLe
I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).
Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.
Its displayed well in all browsers except IE. IE displays like this.
IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.
PS: The png's have transparency.
Any idea how can i fix this bug, or whats wrong in the CSS?
Thanks.
Here is the code:
HTML
<div class="content-holder">
<div class="content-center">
<div class="content-top-shadow"></div>
<div class="content-center-holder"></div>
<div class="content-bottom-shadow"></div>
</div>
</div>
CSS
.content-holder {
width: 100%;
height: 570px; /*once complete change to auto*/
background-image: url(images/content-holder-bg.png);
background-repeat: repeat-x;
padding-top: 20px;
text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
width: 918px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.content-top-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-top-shadow-bg.png);
background-repeat: no-repeat;
}
.content-center-holder {
width: 918px;
height: 200px; /*once complete change to auto*/
background-image: url(images/content-center-holder-bg.png);
background-repeat: repeat-y;
}
.content-bottom-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-bottom-shadow-bg.png);
background-repeat: no-repeat;
}
IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set
font-size:1px;
or something like that, on the top and bottom divs.
Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>