everyone, I am trying to add border to one side of a a element, however, when I add it to one side it give it a sharp diagonal edge:
I am trying to remove the sharp edge and make it a square.
I have tried using pseudo-elemnts to achieve this but I have had no luck:
Currently, I am using:
a{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-left-width: 0;
border-radius: 0px;
position: relative;
}
a::before{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-radius: 0px;
position:absolute;
content:'';
}
But this is still giving me the results below. How can I do this successfully?
See if this works for you:
box-shadow: -10px 0 0 0 black;
Just that, no borders.
Related
I am trying to create a box shadow around a scalene triangle that exists as a pseudo element, as shown below. I have tried many ways but cannot seem to get an even shadow below my image.
I have tried putting a second scalene triangle pseudo element with slightly larger dimensions that is grey but since there is no gradient or shadow effect, it is not what I am looking for.
Does anyone have any solutions?
Would really appreciate some ideas; perhaps there is a way to get a border gradient effect on a second pseudo element and underlay it?
.box {
height: 100px;
width: 100px;
background: blue;
position: relative;
box-shadow: 0 40px 5px 0 rgba(0, 0, 0, 0.50);
}
.box:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid blue;
}
<div style='width: 300px;height:300px;background: white;'>
<div class='box'>
</div>
</div>
What you're looking for is filter!
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
Maps the shadow around the visible parts of the element, instead of its box.
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.
You can have a look on this fiddle I have made: https://jsfiddle.net/1fwrn3wh/1/.
The steps you need to do:
Add a :before pseudo element which the same size of :after element
Slightly move :before element downward
Add the filter with blur aspect
Then it will alike the shadow ;)
For your quick editing, you can add this CSS into your file:
.box:before {
content: '';
position: absolute;
top: 105%;
left: 0;
right: 0;
border-left: 20px solid transparent;
border-right: 80px solid transparent;
border-top: 30px solid rgba(0, 0, 0, 0.5);
filter: blur(2px);
}
And then change the box-shadow of the original box:
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.50);
Cheer ;)
I have a div with a vignette effect.
<div id="box" class="glow"></div>
#box
{
padding:10px;
border:solid 1px #ddd;
width:100px;
height:400px;
position:relative;
}
.glow:after
{
-webkit-box-shadow:inset 0px 0px 70px #CE1A1A;
-moz-box-shadow:inset 0px 0px 70px #CE1A1A;
box-shadow:inset 0px 0px 70px #CE1A1A;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
}
Here's the jsfiddle: http://jsfiddle.net/bEFha/
But what I am really after is a glow from the inside out. So red in the center and white in the sides. The effect I'm trying to achieve is as if there is a red light source shining from underneath the div.
I've tried various things but just not able to the vignette effect to spread out from the center.
Any help is appreciated.
UPDATE: If possible I would like to not modify the background property of #box as I need that to be white.
You could use a radial-gradient background.
See: https://developer.mozilla.org/de/docs/Web/CSS/radial-gradient
Here's a very basic example, you could tweak: http://jsfiddle.net/bEFha/5/
background-image: radial-gradient(farthest-corner at center center, #CE1A1A 0%, #ffffff 100%);
I also find this visual editor very helpful http://www.visualcsstools.com/
I'm not quite sure what your after, but by playing around I got this:
box-shadow:inset 0px 3px 20px 10px #FFF;
background-color: #CE1A1A;
Fiddle Here
Try this vintage effect Demo
Just give background color to the box and you will get cool vintage effect.
#box{ background:#FFE4E4; }
UPDATED ANSWER:
Demo
CSS Changes
#box:after{
content:"";
background: #CE1A1A;
opacity:0.5;
}
.glow:after {
-webkit-box-shadow:inset 0px 0px 120px #fff;
-moz-box-shadow:inset 0px 0px 120px #fff;
box-shadow:inset 0px 0px 120px #fff;
}
Your #box is still white but I added #box:after to make it red.
Demo with Image
I'm honestly not sure where to begin on this one (I'm a graphic designer digging a bit deeper into HTML/CSS, but my current experience is rather slim, so this problem is beyond my ability at the moment):
In part of my newest site design I've broken up sections of the site with banded shades: sections alternate between having the standard page background and applying a 10% black transparency overlay, which serves to distinguish the next section.
The problem is that every new section is supposed to have a block of three centered arrows cut out of the darker (or lighter) shade above, like so:
I know how I could manage this with images, but since the background is a repeating pattern that solution doesn't really work.
Any advice/tips that could help me solve this problem? Basically, all light sections need to begin with three arrows of 10% black transparency, and all dark sections need to begin with three arrows cut out of the 10% transparency background.
Is there an HTML/CSS based way to do this?
Container with trapezoid top border
Trapezoid:
I add the desired border on the top with a pseudo-element ::before.
Choose to display this content as a block this way it gets the size of its container.
Positioned this element relative so it is not displayed inside its container. position:relative; & top: -30px;
The border got a static 30px, and that's why its displayed -30px higher so its exactly above our .cut-out.
Transparency:
Setting the color with rgba() lets you set the opacity of the color.
So rgba(0,0,0, 0.1) sets the container/trapezoid to have a opacity of 10%. where a last value of 1 would equal 100% opacity. (Where you would use rgb() instead)
body {
margin: 0;
}
main {
background-color: rgba(0, 0, 0, 0.1);
}
.cut-out {
display: inline-block;
float: left;
background-color: rgba(0, 0, 0, 0.1);
width: 100px;
height: 150px;
margin: 40px 0 0 0;
}
.cut-out::before {
content: "";
border-bottom: 30px solid rgba(0, 0, 0, 0.1);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
display: block;
position: relative;
top: -30px;
}
.stop {
clear: both;
}
<main>
<div class="cut-out">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:150px;">Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:250px;"></div><!--
--><div class="cut-out"></div>
<div class="stop"></div>
</main>
Here's a fiddle that should help you out. This is done using simple CSS, and I'm just illustrating it here. You can adapt this to match your needs.
Sample HTML:
<div class="cutout"></div>
And the CSS
.cutout {
width: 100px;
height: 0px;
background: none;
border-bottom: solid 30px rgba(0, 0, 0, 0.1);
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 0 transparent;
}
This will give you one of the elements to be repeated. To get some understanding of how this works, check out the following CSS in the updated fiddle:
.cutout {
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.05);
border-bottom: solid 30px rgba(0, 255, 0, 0.1);
border-right: solid 30px rgba(0, 0, 0, 0.05);
border-left: solid 30px rgba(0, 0, 0, 0.05);
border-top: solid 0 rgba(0, 0, 0, 0.05);
}
Basically, we're assigning transparent color to the right and left borders, and giving the div a height of 0. This means only the bottom border remains visible, and a trapezoidal shape is formed because of the border width.
Edit: Looks like the links posted by #Myke showcase this already, I recommend playing around with code like this until you get a good idea of how to render similar shapes.
I was wondering what you guys think is the easiest way to get a double border with 2 colors around a div? I tried using border and outline together and it worked in Firefox, but outline doesn't seem to work in IE and that's sort of a problem. Any good ways to go about this?
This is what I had but outline does not work with IE:
outline: 2px solid #36F;
border: 2px solid #390;
Thanks.
You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1.
I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning.
.border
{
border:2px solid #36F;
position:relative;
z-index:10
}
.border:before
{
content:"";
display:block;
position:absolute;
z-index:-1;
top:2px;
left:2px;
right:2px;
bottom:2px;
border:2px solid #36F
}
http://jsfiddle.net/fvHJq/1/
Use box shadow fo 2nd border.
div.double-border {
border: 1px solid #fff;
-webkit-box-shadow: 0px 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 0px 1px #000;
box-shadow: 0px 0px 0px 1px #000;
}
In this case box-shadow does not ignore border-radius property like outline does
A very simple solution you could use as a fall-back if nothing else would be to use two divs. Your main div, and then an empty one just wrapping it that you could use to set the second border.
Late to the party for this question, but I feel like I should record this somewhere. You can make a scalable function in something like Less or Stylus which will create any number of borders (Stylus here):
abs(n)
if n < 0
(-1*n)
else
n
horizBorder(n, backgroundColor)
$shadow = 0 0 0 0 transparent
$sign = (n/abs(n))
for $i in ($sign..n)
/* offset-x | offset-y | blur-radius | spread-radius | color */
$shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
return $shadow
Then,
$background: #FFF // my background was white in this case and I wanted alternating black/white borders
.border-bottom
box-shadow: horizBorder(5, $background)
.border-top
box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
box-shadow: horizBorder(5, $background), horizBorder(-5, $background)
With box-shadow you can achieve as many different color borders as you want. E.g:
#mydiv{
height: 60px;
width: 60px;
box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}
<div id="mydiv"> </div>
https://jsfiddle.net/aruanoc/g5e5pzny
A little trick ;)
box-shadow:
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;
.border{
width: 200px;
height: 200px;
background: #f06d06;
position: relative;
border: 5px solid blue;
margin: 20px;
}
.border:after {
content: '';
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background: green;
z-index: -1;
}
<div class="border">
</div>
use the class name for .border given the vales border:2px solid #000 for single border.then you want another border try to .border:after given the values if you got second border check out above the code sample
example
I'm new to shadow in css can we set shadows for
round image(i mean to a circle image).
if it is possible, please give me a code for this in css.
thanks in advance
This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency).
You could make a circle with CSS3 and give a shadow, see this jsFiddle.
div {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.
shadows are independent of shapes in css, you can use the shadow property for circle after creating circle.
You can use the following code for that, it should work fine
.circle{
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.
UPDATE:
Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle example of both drawing a circle and loading a circle, then applying a shadow effect to both.
There is great tutorial for box-shadowing with examples here
Also, simple css3 for rounding corners in cross browser
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
just adjust the pix to the corner roundness you want, or use ems instead
This thing worked for me. I wanted a rounded shadow around the image 32x32.
<a class="media-links" href="">
<img class="media-imgs" src="">
</a>
CSS is like this.
img.media-imgs
{
-webkit-border-radius: 20px;
}
img.media-imgs:hover
{
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-box-shadow: 0 0 18px #91bd09;
}
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2); // this is must but values are just an example, set accordingly.
border-radius: 50%; //this is must.
Apply this CSS to your tag or its class, and you are done.
Easy peasy! Set border-radius: 50%; on your image element.
It rounds your image tag and it's drop-shadow.
CSS does not allow you to add shadows to shapes INSIDE images. CSS has no clue what the image looks like.
There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...)
Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/
The best and easy way i can get is to put the image in a div and then provide the border radius same as image to that div and apply box-shadow to that div
.topDiv{
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.img{
border-radius:50%;
}
this will do the work.