I want to realize the following design with CSS. Here's the problem with the code below.
* {
box-sizing: border-box;
}
body {
margin: 50px;
}
a {
text-decoration: none;
}
.box {
display: flex;
width: 80px;
height: 200px;
writing-mode: vertical-lr;
border-radius: 20px 0 0 20px;
background: green;
}
.box-link {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: white;
border: 3px solid black;
border-radius: 20px 0 0 20px;
}
.box:hover {
background: white;
}
.box-link:hover {
color: black;
box-shadow: 0 0 0 10px white, 0 0 0 11px black;
}
<div class="box">
Hello, World!
</div>
That is, even if you hover the box-shadow part, the hover style is not applied.
I've seen solutions on some topics, but I can't finish the design I want to achieve in a little more. Also I cannot use pseudo-elements or add elements.
The code snippet draws a box-shadow on the outside, but you can even draw this inside the element (the inset of the box-shadow).
How to achieve rounded multiple lines without pseudo elements?
Outline radius?
How can I get multiple borders with rounded corners? CSS
Multiple Borders
Related
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
I'm new to flexbox and trying to make a menu using it.
I want links to have a nice border on the bottom when user hovers on them. But even if I set box-sizing: border-box; flex keeps recalculating text position and element 'jumps' instead of predicted behaviour.
I have an example with the problem. I don't want content inside my element to jump when I hover.
Is there any simple solution/edition to my code to make it work as expected? I know other ways of achieving what I want: set baseline, use relative/absolute positioning...
.item {
display: flex;
width: 200px;
height: 100px;
background: #123;
color: #fff;
text-align: center;
justify-content: center;
flex-direction: column;
}
.item:hover {
border-bottom: 10px solid lightgreen;
box-sizing: border-box;
}
<div class="item">
Content
</div>
By adding a 10px border on hover, you are changing the size of the box on hover. That will reposition surrounding elements... on hover.
One solution is to reserve the space for the border at all times. In other words, have the 10px border factored into the element in a normal state.
This border gets the element's background color (or transparent) so it is not visible. On hover, you only change the color.
.item {
display: flex;
width: 200px;
height: 100px;
background: #123;
color: #fff;
text-align: center;
justify-content: center;
flex-direction: column;
position: relative;
}
.item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 10px solid #123;
}
.item:hover::after {
border-bottom: 10px solid lightgreen;
}
<div class="item">Content</div>
I would use an inset box-shadow for this feature.
I managed to recreate the effect by changing the :hover css to:
.item:hover {
box-shadow: inset 0 -10px lightgreen;
}
example here
What if you just set a bottom border by default using the same colour which is on its background? Once you hover over your item, you will need just to change the colour.
I'm trying to align a button so that it stays in the center of my menu bar. The jsfiddle will show you what I mean.
this does not seem to work:
vertical-align: middle;
Here is the code: jsfiddle!
Unfortunately, vertical aligning is one of the tougher things to do in HTML/CSS, depending on the situation.
However, if you not want to use absolute heights and must have it vertically centered, you can always changed the display to table, instead of block: display: table;
I edited your original jsfiddle for a working example.
I added /* Comments */ where I either added or changed CSS.
save yourself some time and try to use bootstrap.
here is the css you can use :
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
but you can find a complete detailed solutions if you take a little time and go to this link :
https://css-tricks.com/centering-css-complete-guide/
Add below to your handle class
https://jsfiddle.net/420qk42v/2/
text-align:center;
.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 5px;
cursor: pointer;
display: block;
text-align: center; /* this is the change */
}
Is that what you meant?
I did a test with the vertical align and it works if you remove the absolute positioning on the menu button.
I also made a new div around the text "menu" and then set that to position absolute while setting the handle to align the text to the right - the button will only move the right.
HTML
</br>
</br>
</br>
<nav>
<div>
<div class="handle">
<!--<div class="heading">MENU</div>-->
<!-- Menu button if on mobile device -->
<a class="menu">
<span class="line"></span>
</a>
</div>
</div>
</nav>
CSS
.handle {
width: 100%;
background-color: #ffe2e2;
font-family: "century gothic";
opacity: 0.9;
box-sizing: border-box;
padding: 10px 10px;
cursor: pointer;
display: block;
text-align: right;
}
/*added class for the menu - the heading text*/
.heading {
/*This is commented out in the markup but is to keep the menu heading on the right*/
position: absolute;
}
.menu {
border-radius: 3px;
border: 1px solid #ccc;
color: #5f5f5f;
font-weight: bold;
display: inline-block;
width: 1.9em;
vertical-align: middle;
height: 1.75em;
padding: 2px 0 0 0;
box-sizing: border-box;
}
.menu:hover {
/* background-image: linear-gradient(#e63d44,#c11a22);*/
/*box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);*/
}
.menu .line {
background: rgb(184,184,184);
border-radius: 2px;
box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);
display: block;
margin: 10px auto 0 auto;
height: 3px;
width: 16px;
content: " ";
overflow: visible;
}
.menu:hover .line {
background: rgb(255,255,255);
box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);
}
Js fiddle to test - https://jsfiddle.net/ToreanJoel/b7mgaasj/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
What should I do if I add border to image but I want edge of this border. Like this:
Green: Image
Dark blue: First border
Light blue: Second border
Using CSS box-shadow to achieve multiple borders. The , separated list values are used to separate multiple borders/shadows. 15px and 30px are values denoted for spread-radius of each border/shadow.
.image {
background: url('http://placehold.it/300x300');
width: 300px;
height: 300px;
margin: 50px;
box-shadow: 0 0 0 15px #3F48CC, 0 0 0 30px #00A2E8;
}
<div class="image"></div>
Outline
body {
text-align: center;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.outline {
outline: 3px solid green;
}
<img class="outline" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Bonus: You can offset the outline.
Note: Outline does not respond to border-radius.
body {
text-align: center;
background: lightblue;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.outline {
outline: 3px solid green;
outline-offset: 3px;
}
.offset {
outline-offset: 3px;
}
<img class="outline offset" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Box-shadow
body {
text-align: center;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.shadow {
box-shadow: 0 0 0 3px blue;
}
<img class="shadow" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Note: box-shadow does respond to border-radius but it's 'value' is to scaled up from that of the border.
JSfiddle Example
<div style="border:3px solid gray">
<img src="data:image/jpeg;base64,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" style="border:2px solid blue">
</div>
you would most likely want to do that using CSS, unless you wanted to use Inline styling (which is generally frowned upon) take a look at this website: http://www.w3schools.com/css/css3_borders.asp
There are a lot of different properties like Borther-width:, border-color:, Border-radius: (if using a circle border). I believe there is one for making to separate borders.
http://www.w3schools.com/css/css_border.asp
for your specific case I'd say something like
CSS:
#green image {
border: 10px, solid purple;
outline: 3px, solid blue;
}
Just add a background-color and padding to the image and a text-align:center to the wrapper div like this:
.box{
width: 260px;
height: 260px;
text-align: center;
}
.box img {
border: #4830D0 5px solid;
padding: 5px;
background-color: green;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/65sf2f66/37/
hey there i wonder if any of you have come across a similar issue? i am working on an ad section of the webpage and its got a really cool background that i would like to carry on into sections of the elements so i have a box that hold a box for a rss feed into updates made on the website and then i have a box for adverts. here is my html:
<div class="side">
<div id="ad">
bla
</div>
<div id="rss_news">
double bla
</div>
</div>
and the css:
.side {
float: left;
background-color: black;
width: 300px;
min-height: 710px;
padding: 0 0 0 0px;
margin-top: 25px;
border: 1px solid white;
border-radius: 8px 8px 8px 8px;
opacity: 0.3;
}
#ad {
border: 1px solid blue;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
#rss_news {
border: 1px solid yellow;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
as you can see and as i was anticipating the side class immits his attributes on the ones nested within him. is there a way that i could somehow tell the other id tags to ignore that opacity?
thanks in advance :D
There is no way to make descendants ignore the parent's opacity.
You can use rgba/hsla colors to get a partially transparent background, without affecting the children's visibility. Example:
.side {
background-color: rgba(0,0,0, 0.3);
}
Demo: http://jsfiddle.net/ywQy5/
See also:
MDN: hsla colors
MDN: rgba colors
You can use css3 rgba property for this & for IE you can use IE filter.Write like this:
.side{
background-color: rgba(0,0,0, 0.5);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE*/
zoom: 1;
}