p {
background: rgba(80,150,220,1);
width: 100px;
height: 100px;
text-align:center;
}
p::before {
content="asdf";
background: rgba(220,150,80,1);
width = 50px;
height = 50px;
top = - 25px;
left = - 25px;
}
<!DOCTPE html>
<head>
</head>
<body>
<p>TEXT HERE</p>
</body>
Without altering HTML
This is my attempt. Let me know if you have any better solution.
Dotted line is supposed to be shown it just represents the element size.
I am trying to keep my padding and margin to 0.
Thanks for the help.
You can specify padding and margin but make them 0 visually by considering the same amount of padding as negative margin then relies on some background coloration:
.box {
width: 100px;
height: 100px;
margin: -20px 0 0 -20px;
padding: 20px 0 0 20px;
background:
/* Top red line (width:80% height:20px) */
linear-gradient(red,red) 0 0/80% 20px,
/* left red line (width:20px height:80%)*/
linear-gradient(red,red) 0 0/20px 80%,
/* Main background; color only the content area (not the padding)*/
rgba(80,150,220,1) content-box;
background-repeat:no-repeat;
text-align:center;
}
body {
padding:50px;
}
<div class="box">TEXT HERE</div>
And if you want with pseudo element:
.box {
width: 100px;
height: 100px;
text-align: center;
background: rgba(80, 150, 220, 1);
position: relative;
z-index: 0;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
top: -20px;
left: -20px;
width: 80%;
height: 80%;
border-top: 20px solid red;
border-left: 20px solid red;
}
body {
padding: 50px;
}
<div class="box">TEXT HERE</div>
Related
I have a div which looks something like this:
.box{
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 3px;
width:100px;
height:100px;
background:red;
}
<div class="box"/>
And I'm trying to achieve this effect. How can I make this box look with such shadows from the inside of the div?
linear gradient
blur filter
absolute positioning
pseudo-elements
flexbox
.box {
box-sizing: border-box;
border-radius: 10%;
width: 100px;
height: 100px;
background: linear-gradient(270deg, red, #c10606);
position: relative;
}
.box:before {
position: absolute;
content: '';
top: 10%;
right: 10%;
bottom: 10%;
left: 10%;
background: linear-gradient(90deg, red, #c10606);
border-radius: 12%;
filter: blur(1px); /* optional for a softer effect */
}
/* optional layout and styling for box contents */
.box {
display: flex;
align-items: center;
text-align: center;
font-family: arial;
color: #ddd;
font-weight: bold;
}
.box * {
position: relative; /* puts interior content over the pseudo-element */
}
<div class="box">
<span>Interior content</span>
</div>
CSS box-shadow
I think the answer posted by #isherwood works as the best one for your use-case. But, there is a way to make the shadow show on the inside of the element by setting the last parameter of box-shadow as inset.
There are a few catches for this solution though. A few things which I could not achieve:
I am unable to implement linear gradient to the shadow.
I am unable to give a border-radius to the inner boundary of the shadow.
div.box {
background: linear-gradient(90deg, hsl(26, 68%, 26%), hsl(26, 68%, 45%));
height: 100px;
width: 100px;
box-shadow: 0 0 0 12px hsl(26, 68%, 35%) inset;
border-radius: 10px;
}
<div class="box"></div>
Reference: How to create an inner shadow using CSS
Well, I edited your code. Here is the demo.
Basically, I added one more div and added some style. Hope it will give you an idea.
Also, I added a snippet down below:-
.box {
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 15px;
width: 100px;
height: 100px;
background: red;
padding: 10px 0px 10px 0px;
}
.inner-div {
box-sizing: border-box;
border-radius: 15px;
width: 78px;
height: 78px;
background: #ee1717;
margin: 0 auto;
}
<div class="box"/>
<div class="inner-div"></div>
<div>
Here's my issue:
I have a mockup from a design company that wants a text block with a 'broken' square border behind some big text that looks like this (description: there is a small white frame behind large text that is broken up by the text, and then a smaller text link below):
Image of an element on client's website,
In the design, the text is displayed accross the white square frame. The way I have implemented it right now is to make the big text's background color gray. Because the current image's background is gray the desired effect is achieved.
What is needed is to achieve that effect (of breaking the white frame) REGARDLESS of the appearance of the image. Because right now, this happens:
the gray background of the text appears like a box in front of the image -- it ought to be transparent
To further illustrate, if I set the background-color of the big text to transparent, the whole frame is shown (the desired effect is a broken frame):
background: transparent #1
More info if it helps:
The white frame element is just a div with a white border.
I am not sure exactly what to search for in this case, if there is an appropriate CSS solution (preferrable) or if I need to use SVG or maybe a PNG? Thank you for any help.
As #Temani Afif pointed out in the comments, it's not one box, but two separate shapes in CSS.
I made an example to illustrate this using flexbox.
.page {
background-color: black;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box-top {
width: 100px;
height: 10px;
border-color: white;
border-width: 2px;
border-style: solid;
border-bottom: none;
}
.box-bottom {
width: 100px;
height: 30px;
border-color: white;
border-width: 2px;
border-style: solid;
border-top: none;
}
.separator {
color: white;
width: 100%;
margin: 5px 0;
padding: 0;
font-size: 40px;
text-align: center;
}
<div class="page">
<div class="box-top"></div>
<p class="separator">
Headline
</p>
<div class="box-bottom"></div>
</div>
You can make a square element with a border and use a mask on it:
body {
margin: 0;
min-height: 100vh;
background: black;
box-sizing: border-box;
padding-top: 1px;
}
h2.fancy {
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 40px, 100% 40px, 100% 100%, 0 100%);
}
<h2 class=fancy>I'm a fancy title...</h2>
The advantage of this solution is that you can make it scale easily with what might change on various screen sizes. For example, with the title's font-size:
document.querySelector('input.font-size').addEventListener('input', function(e) {
document.querySelector('h2').style.fontSize = e.target.value + 'px';
})
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/800) center /cover;
box-sizing: border-box;
padding-top: 1px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
h2.fancy {
z-index: 1;
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
display: block;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 calc(10px + 1.3em), 100% calc(10px + 1.3em), 100% 100%, 0 100%);
}
input[type=range] {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 1;
}
<h2 class=fancy>I'm a fancy title...</h2>
<div class=overlay></div>
<input type=range min=12 max=36 class=font-size>
The disadvantage is that it doesn't work in IE or Edge lower than 18 or in Opera mini. This particular example works in IE 18, though, as it only uses polygon().
box shadows are basically your shape blurred.
that means that at the edges the shadow is curved up.
what if you don't want that? what if your shadow is for a top bar and you don't want it to seems like it ends?
issue:
desired effect :
how do I obtain this?
html :
<div class="TopBar"> </div>
css :
.TopBar {
box-shadow: 0 4px 28px black;
}
Am I supposed to use an absolute positioned element that's bigger than screen width or something?
You can add a spread parameter to the shadow (not exactly the same appearance, but at least it does what you ask for):
html,
body {
margin: 0;
}
.TopBar {
height: 40px;
background: #444;
box-shadow: 0px 4px 24px 16px black;
}
<div class="TopBar"></div>
Fake it! You can use linear gradient and a pseudo element to get the effect you want:
.TopBar {
height: 50px;
background: gray;
position: relative;
}
.TopBar::after {
content: "";
background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%);
position: absolute;
width: 100%;
height: 20px;
top: 100%;
}
<div class="TopBar"> </div>
You can add a pseudo-element (:before) to extend it beyond your original container and therefore, get a wider shadow :
html, body { margin:0; padding: 0 }
.TopBar {
height: 50px;
position: relative;
}
.TopBar:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
background: #454545;
box-shadow: 0 4px 28px #000;
transform: scaleX(1.1);
z-index: -1;
}
.TopBar .content {
color: #add8e6;
}
<div class="TopBar">
<div class="content">Here's some text inside my top bar</div>
</div>
I have a border, which fits 100% width of container div. What I want to do - add background (or img tag) in center of that border, like in example:
http://www.part.lt/img/8a22897d62de874896a3b62107032bd3507.gif
(The "+" is image and line from left and right must be border). White space must be padding or margin from border.
How can I do this?
What I have tried:
JSFiddle
<div class="full-border">
<div class="full-border-cross"></div>
</div>
.full-border {
border-bottom: 1px solid rgb(204,204,204);
padding: 13px 0;
position: relative;
}
.full-border-cross {
background: #fff url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center;
position: absolute;
width: 100%;
height: 100%; padding: 0 13px;
}
Does the white space "have" to be padding? or can you just assign it a certain width?
I've updated your fiddle with this code:
.full-border-cross {
background: url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center #fff;
position: absolute;
left: 50%;
width: 40px;
height: 100%;
}
Here: http://jsfiddle.net/WHVbc/17/
I have updated your requirement below and also available in the following fiddle. Refer that...
Here: http://jsfiddle.net/wRa8n/
<div class="full-border"></div>
<div class="full-border-cross"></div>
<div class="full-border"></div>
.full-border {
border-bottom: 1px solid #CCCCCC;
display: inline-block;
margin: 0 16px;
padding: 0;
width: 200px;
}
.full-border-cross {
background: url("http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: auto;
padding-top: 13px;
width: 15px;
}
Is there a possiblility to bring a html element to front without increasing it's z-index? All elements having the same z-index overlap depending on there order in the DOM. I could remove the element and append it to it's parent again - but is there any nicer solution?
Edit:
Keeping an array of all rects, set all rect's z-index to x and the just hovered to x+1 does the trick, but needs an array.
It would probably work if you wrote your HTML code from bottom positioning to top, since the browser reads the code from the top of the file to the bottom. Still, using z-index is a lot safer and more efficient.
try following code:
strong {
font-family: sans-serif;
}
div {
padding: 10px;
border: 1px dashed;
text-align: center;
}
.DivStatic {
position: static;
height: 80px;
background-color: #ffc;
border-color: #996;
}
.DivAbsolute {
position: absolute;
width: 150px;
height: 350px;
background-color: #fdd;
border-color: #900;
opacity: 0.7;
}
.DivRelative {
position: relative;
height: 80px;
background-color: #cfc;
border-color: #696;
opacity: 0.7;
}
#Main1 {
top: 10px;
left: 10px;
}
#Main2 {
top: 30px;
margin: 0px 50px 0px 50px;
}
#Main3 {
top: 15px;
left: 20px;
margin: 0px 50px 0px 50px;
}
#Main4 {
top: 10px;
right: 10px;
}
#Main5 {
background-color: #ffc;
margin: 0px 50px 0px 50px;
}
<div id="Main1" class="DivAbsolute">
<strong>First DIV #1</strong><br />position: absolute;</div>
<div id="Main2" class="DivRelative">
<strong>Second DIV #2</strong><br />position: relative;</div>
<div id="Main3" class="DivRelative">
<strong>Third DIV #3</strong><br />position: relative;</div>
<div id="Main4" class="DivAbsolute">
<strong>Fourth DIV #4</strong><br />position: absolute;</div>
<div id="Main5" class="DivStatic">
<strong>Fifth DIV #5</strong><br />position: static;</div>