I have added button with rounded corner. It will be little bit blurred with circle button.
.btn {
border: 1px solid #4278ae;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 10px;
border-radius: 100%;
}
Test
I want look like this flat and smooth. How can i achieve this?
1px is just not visible to our eyes. The code has no issue but you can use 2px for it to look better.
As you know pixels work like this,
Therefore we see it as if the curve is not smooth/clear.
.btn {
border: 2px solid #4278ae;
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 10px;
border-radius: 100%;
}
Test
Use Box-Shadow property in place of border:
box-shadow: 0px 0px 3px 0px #4278ae;
in place of
border: 1px solid #4278ae;
It looks more clear
Related
Today I was trying to create a card in HTML/CSS with hidden border which appears after hovering on a card. I came up with this code, which works fine for me:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
I just want to know if there isn't any better way of doing this. This works fine since I don't need to animate it, but is this a proper way of hiding border or not? Thanks for Your answers.
EDIT: I think I should edit my question since I don't want to use box-sizing: border-box property. I'd like to hide my border with "content-box". And here border: none won't work.
Your solution is the right way to handle this problem.
Others have commented that to hide the border you should use border: 0px or border: none but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.
I would use exactly the same method you have used.
You can also adjust the background-clip to avoid the border to overlap the background:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
background-clip:padding-box;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
To hide border use border:none instead border: 5px solid rgba(0,0,0,0);
When you use border: 5px solid rgba(0,0,0,0); means you apply border but with transparent color.
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: none;
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
.card{
border: 0px solid black;
}
.card:hover{
border: 5px solid black;
}
I think that is your solve
First: I dont use bootstrap, I want to build this, without bootstrap.
I want to create this
,but I dont know how to handle the span on the right side of the input field. Here is my try.
.input_register{
padding: 5px;
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
padding: 5px;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</div>
Why is the span higher as the inputfield?
display: inline-block;
inline-block displays similar characteristics as an inline element while being able to alter the sizing like a block element.
Setting line-height: 1em sets the height of the containing block equal to the size of the font. In this case I've used line-height: 1.5em to give it some extra space.
Also, vertical padding on these elements yields unexpected results, using line-height instead gives a more consistent appearance.
.input_register,
.register_span {
display: inline-block;
font-size: 12pt;
line-height: 1.5em;
padding: 0px 5px;
}
.input_register{
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</div>
Currently we make use of nice flat ccs-only buttons that show a push-down effect onclick. They have a weird behaviour:
.button {
cursor: pointer;
display: inline-block;
color: #FFF;
font-weight: normal;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: inline-block;
background: #32a2f0;
border: 0px;
border-bottom: 2px solid #1e87cc;
padding: 10px 30px;
}
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD;
}
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
margin-top: 2px;
padding-top: 10px;
padding-bottom: 8px;
}
http://jsfiddle.net/6SeG8/
The problem is: When clicking the button at the top 2 to 4 pixels, the click event will not trigger. The css :active state does trigger, but the action of the button does not.
It's because of the borders and the top margin you're applying. Rather than specifying border-top: 0px;, etc., you should instead give a transparent border. You can then give extra width to the top border to make up for the margin:
.button {
...
border-top: 2px solid transparent;
}
.button:active {
...
border-bottom: 2px solid transparent;
border-top: 4px solid #0169AD; /* Added 2px to this, instead of 2px margin */
}
JSFiddle demo.
Also you really shouldn't need to use !important at all.
Consider using an after pseudo-element:
.button:active:after{
content: " ";
position: absolute;
top: -4px;
left: 0;
width: 100%;
height: 100%;
}
JSFiddle
Note, that it doesn't work in IE7 and earlier.
.button:active {
border-bottom: 0px !important;
border-top: 2px solid #0169AD;
//margin-top:2px; //this is the problem
padding-top: 10px;
padding-bottom: 8px;
}
Updated Fiddle
.button:hover {
background: #1e87cc !important;
border-bottom: 2px solid #0169AD; // This may cause the onclick not to work when clicking form the bottom of the button
}
Try to press and hold button.
You can see if you press in a middle of the button then the button is dark blue (really pressed).
If you press near the border then the button cannot get 'mouseup' to raise 'click' event. So your javascript will never receive click event and triggered.
If you want the same behavior change border margin to transparent border with desired size.
One thing you can do is
<span class="button">Click me</span>
I'm trying to make a drop down menu, without any images, Pure CSS and HTML like the following:
What I'm not able to do is make this little Triangle shaped trim on Top
is it possible in CSS, if it is, how?
Live Example: http://jsbin.com/owafod/1/
I used CSS triangle generator to create the triangle.
#Nav {
width: 300px;
height: 200px;
background: #333;
}
#Triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ffffff transparent transparent transparent;
margin: 0 auto;
}
Here's a solution with borders :
Result :
HTML :
<div id=a></div><div id=b></div>
<div id=c></div>
CSS :
#a {
border-right: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#b {
border-left: 5px solid white;
border-bottom: 5px solid black;
width: 100px;
display: inline-block;
margin:0;
}
#c {
background: black; height:20px;width:210px
}
Tests
And here's a picture that will probably suffice to explain how it's made and how you can easily use this kind of border trick :
(the code to make it)
How is should be:
http://thc-cup.ucoz.com/How_is_should_be_Chrome_and_Firefox.png
How bad it is on IE:
http://thc-cup.ucoz.com/How_bad_it_is_on_IE.png
Is there any way to make the avatar area display like on Chrome and Firefox?
Link: thc-cup.ucoz.com/forum/2-1-1
CSS from that box:
.postTdInfo {
text-align:center;
background:#e0e0e0;
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
Thanks!
I think this script can help you out CSS3 PIE