I am trying to replicate the following image border using only CSS.
http://fish.websitedesignsflorida.com/wp-content/uploads/2014/05/demoSlide1.png
So far I am only able to replicate it using an image border. Is there was a way to do this strictly in CSS?
The two effects you need are multiple borders and rounded corners.
You can simulate as many borders as you like using box-shadow, which is well supported today. Each box shadow overlaps, so to get more box shadows make them bigger and bigger. To get the rounded corners just use border-radius.
http://caniuse.com/css-boxshadow
html
<img>
css
img {
box-shadow:
0 0 0 10px #921808,
0 0 0 20px #163459;
border-radius: 20px;
}
You can also use padding and a background color to get an extra border. Note this will only appear to be a border because the image is covering up the inside of the shape.
html
<img>
css
img {
padding: 5px;
background: #921808;
border: 5px solid #163459;
}
There are even more ways to do this with CSS, check out this CSS-Tricks Link:
http://css-tricks.com/snippets/css/rounded-corners/
If your image position is fixed then you can use the property position: absolute for the borders of your image. Try this:
<html>
<head>
<style>
.d1
{
width: 200px;
height: 300px;
border: 10px solid #ff0000;
border-radius: 6px;
position: absolute;
top: 0px;
left: 0px;
}
.d2
{
width: 200px;
height: 300px;
border: 10px solid #000000;
border-radius: 6px;
position: absolute;
top: 5px;
left: 5px;
}
.i
{
width:200px;
height: 300px;
}
</style>
</head>
<body>
<img src="first.png" class="i">
<div class="d1"></div><div class="d2"></div></body>
</html>
Hope this helps
Related
I'm having trouble with my worpdress/bootstrap navigation to highlight current page.
I'm trying to find the best workaround, here is what's my method for now, but not working
Make bottom-border on link
Have a margin or padding or any kind of space on container and add background image at the bottom of it
unfortunately the image won't display as soon as it should overlap the border.
Do you have any quick fix or other approach for this ?
Maybe I thought in order to expand the container, is to fix both link and container height and have them placed how I want...
Triangle must be provided as absolute block. It can use :after.
Also for triangle you can use css(not image)
ul{
list-style:none;
}
li{
display: inline-box;
width: 50px;
padding: 20px;
float: left;
}
.active{
position: relative;
border-bottom: 3px solid red;
}
/*triangle absolute position and centred*/
.active:after{
content:"";
position: absolute;
width: 0;
height: 0;
left: 50%;
bottom: -10px;
margin-left: -10px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ff0000 transparent transparent transparent;
}
https://codepen.io/flinius/pen/XgyLba
I'm wondering if it is at all possible to achieve a curved border (with a stroke) using only CSS? At the moment I'm creating curved borders for the header of my website using images:
I'd like to change this to a CSS solution so that I'm not having to alter images when the amount of content within changes - I need these to be dynamic and responsive, I've managed to draw a curve using border-radius:
This works much better for me, but I'm wondering if it is possible to add a stroke to it to make it look a more like the image representation? Any help is greatly appreciated. Here's the code I've written to achieve this:
<div class="slider">
<div class="slide">
<!-- Content -->
</div>
</div>
CSS:
.slider {
background: #21639e;
}
.slider .slide {
background: url("image.jpg") no-repeat #21639e;
border-radius: 100%/0 0 30px 30px;
}
I did try adding border-bottom: 5px solid #fff; to the .slide class, but it ended up looking like this:
I've created a jsfiddle for you to test what I'm trying to achieve.
Yes, you can try and use box shadows to create this kind of border. Applying a white box shadow on the outer side of the element will make it look like a stroke/border.
This - border-bottom: 5px solid #fff; produces a different kind of effect because we are applying only the bottom border to the element. The borders on the left and right are non existent (zero width) and so the line thins out as you go nearer to the edges.
.slider {
height: 500px;
background: #21639e;
}
.slider .slide {
height: 200px;
background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;
border-radius: 100%/0 0 30px 30px;
box-shadow: 0px 6px 0px white;
}
<div class="slider">
<div class="slide">
Some content
</div>
</div>
Below is an updated version of your Fiddle.
For a more graceful looking curve then you can also try the below approach. It uses a pseudo element which is wider than the .slide and then centers the image within it. (I feel that this approach makes it look closer to the original image but the choice is yours)
.slider {
height: 500px;
background: #21639e;
}
.slider .slide {
position: relative;
height: 200px;
width: 100%;
overflow: hidden;
}
.slider .slide:before {
position: absolute;
content: '';
left: -2%;
top: -6px;
width: 104%;
height: 100%;
background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
border-radius: 100%/0 0 30px 30px;
box-shadow: 0px 6px 0px white;
}
<div class="slider">
<div class="slide">
Some content
</div>
</div>
Imagine the following CSS:
#foo {
border: 1px solid black;
border-right: 1px solid blue;
}
In this case, at least under Chrome, the top and bottom right corner pixels of the element are blue, not black. Is it possible to make them black?
You can't do it with the normal CSS border options, but if you want to, you can still have a pure CSS solution:
Basically, what you are going to do is create two pseudo elements with CSS, and cover the corners:
#foo {
border: 100px solid black;
border-right: 100px solid blue;
height:300px;
position:relative;
}
#foo:after, #foo:before{
content:'';
background:black;
width:100px;
height:100px;
display:block;
position:absolute;
}
#foo:after{
bottom:-100px;
right:-100px;
}
#foo:before{
top:-100px;
right:-100px;
}
It might be a little messy, but it works. Set the :after and :before elements width height and position to the width of the border.
And that gives this effect:
JSFiddle Demo
I hope my crappy photoshop skills explain borders to you.
If you look in the 4 corners of the square you can see little lines, thats where one border starts and the next one begins.
This will always be in issue :P
You could either make it a background image (crappy way)
or you can use other divs to make the borders (crappy as well)
The first solution would be using a pseudo-element, which you will position absolutely to cover the right border. In order to ensure that it covers the border entirely, you will have to offset its top, bottom and right positions by the negative value of the border width. In this case I have used a width of 5px to better illustrate the example:
#foo {
background-color: #eee;
border: 5px solid grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
right: -5px; /* move by border width */
background-color: blue;
width: 5px;
}
<div id="foo"></div>
Alternatively, you can use CSS box shadow:
#foo {
background-color: #eee;
box-shadow: inset 0 0 0 5px grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px;
background-color: blue;
}
<div id="foo"></div>
As others have pointed out, your problem is how borders are drawn in CSS.
<div id="foo">Problem</div>
#foo {
border: 30px solid black;
border-right: 30px solid blue;
}
The simplest way to work around this is to use a pseudo element. Since this workaround is entirely dependent on the value of the border-width, I’ll show an example using an SCSS variable to help make it clear where that width value is coming in.
Note: You don’t need SCSS to solve this problem, using a variable just helps readability/maintainability.
HTML:
<div id="foo"></div>
SCSS:
/* Set SCSS variable */
$border-width: 30px;
#foo {
border: $border-width solid black;
position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
content: '';
background: blue;
width: $border-width;
height: 100%;
position: absolute;
right: -$border-width;
}
Demo: http://jsbin.com/cimaxe/6
Hopefully it’s clear that everywhere you see $border-width you can replace it with a value like 30px.
I have a container that uses inset box shadow. The container contains images and text. The inset shadow apparently does not work on images:
The white section here is the container. It contains a white image, and there is inset box shadow applied to it.
body {
background-color: #000000;
}
main {
position: absolute;
bottom: 0;
right: 0;
width: 90%;
height: 90%;
background-color: #FFFFFF;
box-shadow: inset 3px 3px 10px 0 #000000;
}
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>
Is there a way to make the inset box shadow overlap images?
Just to chime in on this, because I was just creating something similar...
I hate polluting my markup with extra elements for the sake of styling, so the CSS solution is to use the :after pseudo element:
main::after {
box-shadow: inset 3px 3px 10px 0 #000000;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>
It's probably too late for what you were trying to do, but is the better solution in my estimation.
Because the shadow is part of the parent container it renders below the image. One alternative is to have a div which places a shadow overtop the image like so:
body {
background-color: #BBB;
}
main {
position: absolute;
bottom: 0;
right: 0;
width: 90%;
height: 90%;
background-color: #FFFFFF;
border-radius: 20px;
}
main img {
border-radius: 20px;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 3px 3px 10px 0 #000000;
border-radius: 20px;
top: 0;
left: 0;
}
<main>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" />
<div class="shadow"></div>
</main>
Edit: I've updated the fiddle to include border radius on the shadow and on the img which solves the issue identified in the comments.
The reason it's not overlapping is because the image is inside the div, so the image is on top of it. The image is higher (closer to the user) than the div.
You can change the image to use position: relative; z-index: -1, and have the containing div use a border instead of setting background color on the body. You'll need to use box-sizing: border-box to include the border in the width of the div.
DEMO
body {
background-color: #FFF;
}
main {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: 60px solid black;
box-shadow: inset 3px 3px 10px 0 #000000;
box-sizing: border-box;
}
img {
z-index:-1;
position: relative;
}
For those, who're using absolute-positioned, full-size :before/:after pseudo elements, consider using pointer-events: none on the pseudo-element so the original elements remain clickable.
The best way to achieve this in 2020 would be to use mix blend mode on the image. use the box-shadow on the parent element of the img and use mix-blend-mode: multiply.
You could set the image as the div's background instead:
background-image:url(http://www.placehold.it/500x500)
jsFiddle example
https://stackoverflow.com/a/21415060/6235358
that's a great way to do it but we can do it in a better way using the ::after pseudo-class so you'll not have to add an empty <div> to your HTML
As Rilus mentioned we could use a pseudo class. Unfortunately this does not seem to work on an img tag for some reason however we can use a combination of inner and outer containers to achieve the affect we need.
.outer:hover .inner:after {
position: absolute;
content: '';
color: white;
display:block;
bottom: -0px;
right: -0px;
width: 100%;
height: 100%;
z-index: 11;
border: solid 10px red;
}
http://jsbin.com/kabiwidego/1/
not sure about ie 10 though as it seems to handle pseudo classes that are absolutely positioned slightly differently to most browsers.
One simple fix if you are clever with your decimals is to store your content in a separate div which you then select and implement a certain number of pixels from the top.
For example, let's say your header has a height of 50px. You could begin your #content div id 53.45px from the top (or whatever height your drop shadow is) and then your shadow would appear above the images.
One issue with this is that if you are using a rather transparent shadow, the more transarent it is the more tacky it may look by implementing this css.
In practice the code would be as follows:
HTML:
<header>
Whatever's in your header
</header>
<div id="content>
Page content
</div>
CSS:
header {
height: 50px;
box-shadow: 0 5px 5px rgba(0,0,0,1);
}
#content {
top: 55px;
}
Even if i'm late for the party, I had the same issue these days and worked on a solution. For me, the best solution (mobile friendly) is this one:
JSFiddle:
.image-inset-container {
margin-bottom: 30px;
}
.image-inset-shadow {
position: relative;
}
.image-inset-shadow img {
border-radius: 20px;
}
.image-shadow {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 3px 3px 10px 0 #000;
border-radius: 20px;
top: 0;
left: 0;
}
<body>
<h4>Reimagined Web Design</h4>
<p>With your input and business goals in mind, we bring your brand to life through custom human-facing graphics and
visual elements targeted toward your audience for good user experience and created in future-forward technology,
guaranteeing a successful new web design.</p>
<div class="image-inset-container">
<div class="image-inset-shadow"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" alt="img1" />
<div class="image-shadow"></div>
</div>
</div>
<p>We initiate a collaborative process where your team is involved in every step to create a frictionless and
delightful
experience for your customers. Our designers immerse themselves in your industry and your brand aesthetic to
deliver
a website that represents your business while achieving your goals for a connected future.</p>
</body>
I'm trying to create a CSS button and add an icon to it using :after, but the image never shows up. If I replace the 'background' property with 'background-color:red' then a red box appears so I'm not sure what's wrong here.
HTML:
<a class="button green"> Click me </a>
CSS:
.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}
.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
.green {
background-color: #8ce267;
}
You can check this fiddle to see what I mean exactly.
Thanks for any tips.
A couple things
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
.button:after {
content: "";
width: 30px;
height: 30px;
background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I updated your jsFiddle to this and it showed the image.
As AlienWebGuy said, you can use background-image. I'd suggest you use background, but it will need three more properties after the URL:
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Explanation: the two zeros are x and y positioning for the image; if you want to adjust where the background image displays, play around with these (you can use both positive and negative values, e.g: 1px or -1px).
No-repeat says you don't want the image to repeat across the entire background. This can also be repeat-x and repeat-y.