I have a CSS "tab bar" with a bottom border. The active tab should have a "hole" in the bottom border. I've implemented this by a negative bottom margin and a bottom border the same colour as the background.
This looks fine at normal browser zoom:
But looks bad in various ways in Chrome and Safari if I zoom the browser window:
How do I make it not look bad when zooming? Ideally without introducing additional markup. I would like for it to work at least in all modern browsers.
Here's the code (JSFiddle: https://jsfiddle.net/4utwsvt2/):
HTML:
<body>
<div class="tabs">
<div class="tab active">Foo</div>
<div class="tab">Bar</div>
</div>
</body>
CSS:
body { background: #fff; }
.tabs {
border-bottom: 1px solid #000;
}
.tab {
display: inline-block;
border: 1px solid #000;
margin: 0 5px -1px;
padding: 5px;
}
.tab.active {
border-bottom-color: #fff;
}
I've tried decimal pixel values as suggested here with no luck (JSFiddle: https://jsfiddle.net/1gyz7me5/1/).
I've tried using position: relative instead of a negative margin, with no luck (looks good in Chrome but not Safari – JSFiddle: https://jsfiddle.net/qwkvxdj4/).
I've tried using translate instead of a negative margin, with no luck (JSFiddle: https://jsfiddle.net/qwkvxdj4/1/).
I found a solution on Chrome zoom levels except for 75% and 33% and 20%:
body { background: #fff; }
.tabs {
border-bottom: 1px solid #000;
}
.tab {
display: inline-block;
position: relative;
top: 1px;
border: 1px solid #000;
margin: 0 5px;
padding: 5px;
}
.tab.active {
border-bottom-color: #fff;
}
The problem is "hiding" the bottom border with the tab's bottom border to appear active. At certain zoom levels, the aesthetic will only partially cover (if at all) the bottom border. By removing the negative margin and making the position relative, you're moving the tabs after the page has rendered, which is a decent pseudo-fix for zooming in at least.
Related
I have a problem that happens only in Google Chrome. The borders appear to be "too thick". In Firefox, everything seems normal (I've tested in chrome and firefox only so far).
As you can see on the image, there are 2 problems:
1) upper arrow: the borders are to thick (it is 1px solid #aaa). When I draw a table with css, the borders are normal. This happens only with div's and form input fields.
2) lower arrow: the background of the inner div slightly goes above the border of the outer div.
Could this be a bug in Chrome?
.outer-div{
border: 1px solid #aaa;
box-sizing: border-box;
}
.outer-div > .inner-div{
padding: 5px;
background: linear-gradient(#eee,#ddd);
}
EDIT: the code that produces the results where the lower arrow is pointing at.
.calendar-events-block{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 15px 0;
border: 1px solid #aaa;
}
.calendar-events-block > .events{
flex: 1 1 auto;
}
.calendar-events-block > .events > .title{
padding: 10px;
font-weight: 700;
border-bottom: 1px solid #aaa;
background: linear-gradient(#eee,#ddd);
}
EDIT 2: If I zoom out to 90%, everything seems normal (like in Firefox).
EDIT 3: a jsfiddle (http://jsfiddle.net/p31ajt48/) with the problem.
EDIT 4: Funny detail: when I zoom in or out, the problem with the "overflow" (the background of the title that goes over the border) dissapears.
Another screenshot:
Left you have a table, at the right you have some divs. The border of the table = 1px solid #aaa, the border of the divs = 1px solid #aaa, but the tabel borders are much thinner than the div borders.
Since this is only happening in chrome, It's probably got to do with chrome's default styling. Try adding a css reset to the document or try adding
* {
border: none;
}
to your body.
Check it out:
That weird or what?
Here's the CSS:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid gray;
}
How do I lose the holes?
To answer your question...
Yes, that is weird but not that weird.
In terms of fixing it...
Well that depends on the HTML you have there. Assuming (as i have) that its a textarea inside a div with rounded corners then you should be able to use overflow:hidden to ensure the textarea's corners are clipped. EG:
.highlight {
display: inline-block;
border-radius: 5px;
margin: 10px;
border: 1px solid #333;
background:white;
overflow:hidden; /* <- try adding this */
transform:translateY(100%) scale(3); /* <- nothing to do with the solution - just zooming in so you can see the corner */
}
textarea {
border: none;
background:red;
}
<div class="highlight">
<textarea>
It not that weird
</textarea>
</div>
I want to create a partial circular border around an element using pure css. I've been able to achieve the effect to a certain extent in this: http://jsfiddle.net/5MZMj/202/
However, this removes 25% or the border, How do I remove just 5% or say 20% ?
Also, how do I rotate the border (without rotating the content inside)?
Code in jsfiddle:
HTML:
<div class="one">
<div class="two">4.5</div>
</div>
CSS:
.two {
font-size: 24px;
display:inline;
padding-bottom:5px;
}
.one {
padding: 10px;
border: 1px solid green;
border-radius: 25px;
border-top-color: transparent;
width:30px;
margin-left: 10px;
}
Edit: image to give an idea of the effect I'm trying to achieve: http://imgur.com/JU78ICT
Edit2: sorry, I just realized I had linked the wrong jsfiddle, correct one is: http://jsfiddle.net/5MZMj/202/
I'm not sure if this is what you're looking for, but a simple hack is to put the upper right circle behind your main div:
#f {
z-index: -1;
}
http://jsfiddle.net/5MZMj/199/
Partially solved using psuedo elements, see: http://jsfiddle.net/5MZMj/205/
:after {
display: inline-block;
content: "";
border-left: 10px solid transparent;
border-top: 25px solid #fff;
border-right: 10px solid transparent;
border-top-color: #fff;
position: absolute;
margin-top:-42px;
margin-left: -5px;
}
Editing margin-top, margin-left and border-right changes the amount of arc to be removed.
[There ought to be a better way though, someway in which editing a single variable changes the amout of arc to be removed]
I didn't get you all, but may be this is the answer.
#f
{
right:-93px;
}
http://jsfiddle.net/7zDNK/
You can specify the radius for each corner if that what you mean:
border-radius: 5px 10px 15px 20px;
Starting with the top-left corner and going clockwise.
If you want to take less of a chunk out of the corner, you need to adjust the positioning of the circle.
http://jsfiddle.net/5MZMj/201/
#f {
right: -85px;
top: -85px;
}
In Play 2, there's a sample computer-database-jpa supporting the sorting of columns. By default it's sorted by computer, an arrow is indicating the sort order. I need this CSS style / arrow in another project, but even after examining the CSS code for this table header
<th class="name header headerSortDown">
Computer name
</th>>
I still can't see where the arrow is coming from? Any hint on this? Thanks!
Update:
One can browse the CSS here: https://github.com/playframework/Play20/tree/master/samples/java/computer-database-jpa/public/stylesheets
But on e.g. headerSortDown I can't find something that looks like an arrow ):
For a follow up question:
How to get the arrow directly next to the text?
The easiest way is to use inspection tool of your browser (ie FireBug in Firefox or built-in inspector in Chrome)
Here's standalone extract of the arrows, as you can see they are 'drawing' the arrows with CSS border (no image required)
<!DOCTYPE html>
<html>
<head>
<title>Arrows a'la Twitter Bootstrap</title>
<style type="text/css">
.header {
width: 200px;
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
}
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
}
.headerSortDown:after, .header:hover:after {
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: visible;
}
.headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
}
</style>
</head>
<body>
<div class="header">Not selected</div>
<div class="header headerSortDown">Arrow up (sorting ASC)</div>
<div class="header headerSortUp">Arrow down (sorting DESC)</div>
</body>
</html>
And here's nice tutorial about drawing triangles with CSS border.
Edit
DIV tag uses a block display so it tries to use full width OR the width given in CSS style (in above sample it's 200px) if you'll use that arrow with some inline element like A or SPAN the arrow will be 'glued' to the text. Of course you can also force displaying DIV as an inline, the simplest way to do that (by modifying sample)
for .header declaration: remove width and add display: inline-block;:
.header {
/* width: 200px; don't set width anymore */
background-color: #c2ccd1;
padding: 4px;
margin: 2px;
display: inline-block; /* force displaying DIV as an inline element */
}
To control space between text and arrow just use margin-left property for .header:after part:
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: hidden;
margin-left:4px; /* space between text and arrow for inline elements */
}
OR if you want to preserve a space for the arrow in the inline elements (to avoid width changes on hover) - you can also add transparent 'arrow'
.header:after {
content: "";
float: right;
margin-top: 7px;
visibility: visible; /* make it visible by default */
margin-left:4px; /* space between text and arrow for inline elements */
border: 4px solid transparent; /* set borders to transparent, so they won't show */
}
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)