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 5 years ago.
Improve this question
how can I add border around whole site, example like here: http://ksize.be/
and I want that border to stay on every page same static, only stuff inside it change when scrolling.
Thanks in advance guys
I just replicated the code in the example site:
.ct, .cb, .cr, .cl {
background-color: #e79d80;
position: fixed;
z-index: 99999;
}
.ct {
top: 0;
right: 0;
left: 0;
height: 12px;
}
.cr {
top: 0;
right: 0;
bottom: 0;
width: 12px;
}
.cb {
bottom: 0;
right: 0;
left: 0;
height: 12px;
}
.cl {
top: 0;
left: 0;
bottom: 0;
width: 12px;
}
<div class="ct"></div>
<div class="cr"></div>
<div class="cb"></div>
<div class="cl"></div>
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to get the underline effect when the input is focused (-> left to right)
I saw a lot of "tricks" you can achive that with.
But I was wondering what is the most efficient way to achive this?
(Browser support wise and syntactic wise)
Thanks.
.input{
position: relative;
display: inline-block;
overflow: hidden;
}
.input > .txt-underline{
border: none;
outline: none;
}
.underline{
transition: all 0.5s;
display: inline-block;
bottom: 0;
left: -100%;
position: absolute;
width: 100%;
height: 2px;
background-color: #f00;
}
.input > .txt-underline:focus + .underline{
left: 0;
}
<div class="input">
<input type="text" class="txt-underline" placeholder="Please Enter Name">
<span class="underline"></span>
</div>
Here is a simple and easy example.
#input {
position: relative;
display: inline-block
}
span {
content: '';
position: absolute;
left: 0;
bottom: -5px; /* depending on height */
height: 5px; /* height of span -like border */
background: #f00;
transition: all 0.5s linear;
width: 0 /* hidden */
}
input:hover ~ span {
width: 100% /* full width on hover */
}
<div id="input">
<input type="text" placeholder="input" /><span></span>
</div>
I have created a code for a page following Stackoverflow answers. It works very well, but I'd like to optimize it, which I do not know since I'm not a programmer. What is the right way?
#black:before {
content: "";
position: fixed;
top: 0;
right: 0; left: 0; bottom: 0; background: none;
z-index: -2;}
#red:before {
content: "";
position: fixed;
top: 0;
right: 0; left: 0; bottom: 0; background: none;
z-index: -2;}
#black:target::before {background: #ACAA92;}
#red:target::before {background: #ACAA92;}
#black:hover .text{display:block;}
#com:hover .text{display:block;}
All selectors which should share the same properties and values can simply be comma separated. You can write them all on one line though a more preferred style is to put each one its own line to aid readability:
#black:target::before, #red:target::before { background: #ACAA92; }
#black:hover .text,
#com:hover .text {
display:block;
}
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors#Groups_of_selectors_on_one_rule
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 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 5 years ago.
Improve this question
is possible to draw CSS shape like (Not necessarily exact):
Thanks
it will be much better with SVG I think, or just using photoshop to make a .png
But using css for sure you can do it
.the1 {
position: fixed;
background-color:white;
width:100%;
left: -15%;
height:100%;
top: 12%;
border-top-left-radius:50%;
border-top-right-radius:100%;
}
.the2 {
position: fixed;
background-color: white;
width:100%;
left: 15%;
height:100%;
top: 12%;
border-top-left-radius:100%;
border-top-right-radius:10%;
}
.the3 {
position: fixed;
background-color: red;
width:50%;
left: 52%;
height:32%;
top:3%;
border-bottom-left-radius:100%;
border-bottom-right-radius:50%;
}
body{
background: red;
}
<div class="bg">
<div class="the1">
</div>
<div class="the2"></div>
<div class="the3"></div>
</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 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>