Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How to make border-bottom inside block after hover event?
I tried this using text-shadow, but seems it is not solution
An inset box shadow seems to be what you require
div {
height: 75px;
background: #c0ffee;
}
div:hover {
box-shadow: inset 0 -5px 0 red;
}
<div></div>
OR
Use a pseudo-element
div {
height: 75px;
background: #c0ffee;
position: relative;
}
div:hover::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 5px;
background: red;
}
<div></div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 months ago.
Improve this question
How should I animate text (with writing-mode set to vertical-rl) background in CSS to increase its height when you hover over it? Something like this: https://youtu.be/A_ZS3aE_8Bw
Thanks!
#text {
--width: 2rem;
font-size: var(--width);
writing-mode: vertical-rl;
position: relative;
}
#text::before {
content: "";
position: absolute;
width: var(--width);
height: 0;
background-color: red;
z-index: -1;
transition: all 0.3s ease-in-out;
}
#text:hover::before {
height: 10rem;
}
<div id="text">hello world!</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i want to code a box like this
and completely using css and other web language ,
not the thing like svg ,
is it possible ?
it is simple when it's cuppy
but the problem is when convex
may some one help me?
The .rect::after has border-radius: 50% and a very long white shadow that will be visible only inside the .rect since the .rect element has overflow:hidden.
For the rect's shadow I'm using filter:drop-shadow(1px 1px 3px #000)
.rect {
position: relative;
height: 100px;
width: 300px;
margin:2em auto;
overflow:hidden;
filter:drop-shadow(1px 1px 3px #000)
}
.rect::after {
content: '';
border-radius: 50%;
background:transparent;
box-shadow: 0 0 0 60vw white;
display: block;
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom:-25px;
}
<div class="rect"></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
How can i create css figure? I need something like on image.
May be online service, but i didn't find. It's a heavy figure, that's why I'm asking. Also, lateral colored figures I will need to change color.
IMAGE
If I understood your question correctly, here is a example how you can reach the goal.
button.figure {
border: none;
padding: 8px;
color: #2F2F2F;
font-size: 18px;
border-radius: 10px / 50%;
min-width: 100px;
position: relative;
margin-left: 20px;
}
button.figure:before,
button.figure:after {
content: "";
width: 50px;
height: 100%;
position: absolute;
top: 0;
border-radius: 10px/50%;
z-index: -1;
}
button.figure:before {
background: red;
margin-left: -6px;
left: 0;
}
button.figure:after {
background: green;
margin-right: -6px;
right: 0;
}
<button class="figure">Button</button>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
In IE(>9) and Microsoft Edge,border-radius have a bugs when border-width is very wide.
.number {
display: inline-block;
position: relative;
left: -3px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #ff7322;
border-radius: 50px;
border: 8px solid #f0f0f0;
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
}
<span class="number">1.1</span>
its bug it IE
There is a workaround for these issues: element can be replaced with two nested elements, where the inner element has the desired background color as its background while the outer element’s background color is equal to the desired border color, and the outer element has padding equal to the desired border width.
HTML
<div class="ok"><div>…</div></div>
CSS
.ok {
background: #000; /* Border color */
border-radius: 100px;
padding: 70px; /* Border width */
}
.ok > DIV {
background: #fff; /* Background color */
border-radius: 30px; /* Radius of outer element minus border width */
height: 60px; /* For illustration purposes */
}
Example and source :
http://tanalin.com/_experimentz/demos/blog/2011/border-radius-rendering/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a problem with horizontally centering a DIV.
I have provided a full example here.
This is inside a Content Editor WebPart in SharePoint 2010 Standard.
http://fiddle.jshell.net/hdA7d/
<div class="weathercontainer">
<div id="weather" class="items" onClick="window.open( 'http://www.weather.com/weather/today/33196','_blank' ); return false; " >
</div>
</div>
.weathercontainer{
width: 100%;
}
.items {
width: 170px;
margin: 0px auto;
position: relative;
cursor: pointer;
}
Like this
demo
css
.center
{
left: 50%;
position: absolute;
top: 50%;
}
.center div
{
border: 1px solid black;
margin-left: -50%;
margin-top: -50%;
height: 100px;
width: 100px;
}
You can just give the absolutely positioned .items a left and right position of 0 and a margin of auto:
.items {
position:absolute;
margin: 0px auto;
left:0;
right:0;
}
See this updated fiddle.
Check if this works for you.
click here
display: table-cell;
vertical-align: middle;