CSS Border rendering - css

I like to know if is possible to specify the border drawing style (not border-style) with CSS (I need that works at least on webkit).
Well, I have an element like div.border and it have four-side border 5px silver solid. But depending of class addition, like div.border.red-mark, it will receive a border-left: 15px red solid. I need that the rendering style be rectangular and not adaptative to line width (or angled to a point).
To clarify, take a look at this example. And I need get something like that. But I can't modify the HTML structure, like I did on second example; I really can use only CSS for that.
Is it possible?

You could use CSS pseudo-content to achieve a fake border, like this:
.red-mark:before {
content: '';
display:block;
width: 15px;
position: absolute;
top: -15px;
left: -15px;
bottom: -15px;
background: red;
}
See: http://jsfiddle.net/MnPka/1/
The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing

The :before solution offered by Josh Davenport is probably the best answer here, but just for completeness, I should also mention border-image.
border-image is a relatively new CSS feature that allows you to specify an image for each of the border edges and corners. This would enable you to design your border exactly as you want it.
Your example would be a pretty trivial case for it; as I said the other answer is probably better for you; but for more complex cases, it's a great little feature to have in your toolbox.
You can read more about it here at the MDN.
The one thing to note (as mentioned on the MDN link above) is browser compatibility. It will work in most current browsers, but not in any current IE versions (IE10 or earlier), and may have issues in older versions of other browsers. However, you specified you were particularly looking for a Webkit solution, and it has been supported in webkit browsers for ages, so it should be okay.

Related

Advanced CSS Tricks: Capital Initial Letters (Drop Caps) within a CSS3 Multicolumn

Since about a year the multicolumn css3 property matured enjoying support from many browsers. Reason to finally implement it on your website for better design and readability. I thought let's push the envelope and adopt the ancient-but-ever-so-beautiful Drop Caps (=first large initial letter) into the multicolumn. However, certain screen widths break the multicolumn layout in FireFox. What am I doing wrong?
see jsfiddle DEMO
When resizing the window width, you can see the jumping/breaking of the layout in action in IE and Firefox. Below an example. Stuck on whats causing the defects in the multicolumn miss-alignments!?
Sorry for my beardy alter ego selfportrait: I forgot to shave, was staring all day at this problem with no time to tidy up. I promise you though a clean neat shaved portrait back here once this issue is solved!
Above more alignment problems in most screen widths on Internet Explorer 11. Curious Safari and Chrome show the layout faultlessly at all browser screen widths no breakage there.
#multicolumn {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 53px;
-moz-column-gap: 53px;
-webkit-column-gap: 53px;
column-rule-color: #EEE;
-moz-column-rule-color: #EEE;
-webkit-column-rule-color: #EEE;
column-rule-style: solid;
-moz-column-rule-style: solid;
-webkit-column-rule-style: solid;
column-rule-width: 1px;
-moz-column-rule-width: 1px;
-webkit-column-rule-width: 1px;
}
#multicolumn p:first-letter{
float:left;
font-weight:normal;
font-size:44px;
margin: 7px 1px 0px 0px;
line-height:27px;
background-color:#AEE;
}
First of all I want to say that the use of the multi column layout module is still not recommendable.
Mainly because of the missing support for the break-before , break-after, break-inside properties, with the exception of IE 10+ and the proprietary -webkit-column-break-* properties (see: CSS3 Multiple column layout).
(You also may want to take a look at my answer to this SO question: IE (11) improper handling of CSS multi-columns?)
Additionally you have to remember, that there is a so called "multi-column pseudo-algorithm", which seems to be confused by your :first-letter selector.
You can avoid this problem by using a span element with a class attribute for the drop caps instead.
But as the first letters are larger in size than the rest of the text, there arises another problem.
It may happen that a (single) line of text of the beginning of a paragraph with a drop cap may fit to the previous column, whereas the drop cap (which is about twice as high as the normal text) may not.
To avoid this unwanted behaviour you have to use another span element, which includes at least more text than that may fit into a single line (of text)!
And giving these span elements a display: inline-block; solves this problem.
Just a word about Amir5000 answer: Though my proposed solution also needs some extra span elements, it does not use "purely presentational markup" which may also produce unwanted empty lines.
But as said at the beginning, using multi-column is at least very "tricky" and very difficult to get predicted results across browsers and/ or different viewport widths.
So here is my proposed "solution": DEMO
The cause of the issue was the float:lefton the #multicolumn p:first-letterif you take that out you will see it no longer has that issue; However you don't have the same format you wanted with the first letter. So I created a JSFIDDLE where I added
#multicolumn p {
float: left;
}
and added a width for the #multicolumn container and centered it as you can see.
Hope that resolves the issue for you.
-------Update---------
So after much time trying to get it to flow as intended I was able to come up with a work around that is pretty simple, if you take a look now at the updated FIDDLE
I added an empty span in between paragraphs to clear the float and also added a media query so it looks nicer on smaller screens
This was the simplest way I could come up with to solve your issue hope that helps!!
I am not sure about the the column issue. You should make a fiddle for it so that we can help you faster. As far as the first cap issue. This is pretty tricky, what are your constraints? Can you hardcode it look right or do you have to do it dynamically?
I have posted a hardcoded solution here. It is basically just using
:before
http://jsfiddle.net/emersive/bdAWQ/1/
I have Chenges below css
p { float:left;}
#multicolumn { line-height: 20px; } /*need for IE browser*/
Demos

How to create CSS browser-specific borders

I am trying to obtain a dashed table border, which has rounded edges (using border-radius). I have achieved this in all other browsers, but I know it is a bug in Firefox, and will never display properly. See the problem I have here.
I am wondering if it was possible to have Firefox alone displaying a solid line, rather than a dashed line, whilst leaving the other browsers to display a dashed one.
Essentially,
If Firefox,
border: 2px solid #000000;
-moz-border-radius:10px;
If any other browser,
border: 2px dashed #000000;
-webkit-border-radius:10px;
border-radius:10px;
I am fairly new to CSS and haven't dealt with browser specifics yet. If anyone could help (or point out problems to this method!) then I would be very grateful.
Thanks
If FireFox is bugging out, it may be worth going down the route of images for firefox.
You could have some classes:
.tr, .tl, .br, .bl {
display: none; /* Don't show for normal browsers. */
}
#-moz-document url-prefix() { /* Activate for FF. */
div { /* Probably best to tie this to a class / id. */
position: relative;
}
.tr, .tl, .br, .bl {
display: inline;
position: absolute;
}
.tr { /* top right */
background-image: url("curved_top_right.gif");
top: 0;
right: 0;
}
.tl {} /* top left - Use .tr as a ref */
.bl {} /* bottom left - Use .tr as a ref */
.br {} /* bottom right. - Use .tr as a ref */
}
Then in your Html
<div>
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
</div>
Not ideal but might help you as FF is bugged.
You can do this a few different ways.
You could add a conditional stylesheet for firefox. This is a little overkill for just a couple styles.
You could use a CSS hack. This is not the best method since it relies on a browser bug (that could be fixed).
You could use a javascript or PHP function to parse the user-agent and append the os, browser, and version to the body or html tags as classes. Then you can write the styles with the correct class.
You could submit a bug report and pray.
Hope this helps! Good luck!
The short answer is no, that's not really possible.
The ideal solution is for Firefox to fix the problem and the issue to just go away. It looks like a fairly obvious problem, so I would assume that the Mozilla team know about it; it might be worth your time checking the Firefox issue tracker to see if they've got a ticket for it and whether it's had any work done on it. Given their rapid release cycle, there's a chance it may be fixed relatively soon, you should check this -- one thing you don't want to do is spend ages fixing your site to work around it, only to find it's a non-issue by the time you've done the work.
Having said that, the effect does appear to be deliberate by the browser: I recall that earlier versions of Firefox did show dots on rounded corners, so there may be some sensible reasoning behind it. I agree it's not ideal though. But if it's a standard feature of the browser, why not just run with it and let Firefox users have it the way Firefox wants to show it? (it doesn't look that bad, does it?)
On the flip side, of course, a question that might be asked is that if you're happy to have a solid border for Firefox users, why not just make it solid for everyone? That would seem to be the simplest answer.
Assuming you do still want to resolve it, in terms of work-arounds, I would strongly advise you to shy away from browser hacks or user agent parsing; both these solutions are brittle and could lead to problems. Obviously, in this case, the worst that is likely happen is the wrong border being shown, but nevertheless, you should be wary of both techniques.
One suggestion would be to try out border-image instead of border-radius.
border-image is a relatively new and little-used CSS feature, which allows you to construct your borders using images. (you'd never guess from the name, right?)
The beauty of border-image is that you can do pretty much anything you like with your border. If you want a specific dotted pattern, then just create an image with that pattern of dots; problem solved.
The syntax is a bit fiddly, and it works best with SVG images, but I'm sure you'll get it after a bit of experimentation.
As you can probably tell, it's a very powerful feature. The main reason it's little-used is because it's new. This means it doesn't have great browser support, but for you that really shouldn't matter because you'll be drawing borders that look relatively close to the standard border-radius effect, and you can use the standard border-radius as a fall-back. The one browser that you do want to affect (Firefox) does have support for it, so it should solve the problem.
Yes, I agree, it's a slightly complicated answer to a simple question, but it may be a way to make it work reasonably consistently across all browsers. Worth a try anyway.

Achieve an inner text-shadow for thinner looking fonts

I've seen other solutions on this topic, but none of them did the result I need (or want).
The problem is, Mac renders some fonts in an awkward way, the fonts are way too thick, even on Regular style. It's annoying!
So I thought I'd go for a CSS-Workaround to let the fonts seem thinner. All I could think of would be an inner-shadow for texts in hope they won't get too blurred, but this is easier said than done, text-shadow doesn't support this (for whatever reason).
Does anyone have an idea on how to achieve this effect?
I think this would be a losing battle, if you take into consideration that now, rather than the possibility of only dealing with fonts at a fixed resolution (72dpi, the standard on monitors for a decade or so, now), you also have to deal with some Mac's "retina displays" where the resolution is approximately 220-227ppi.
I'm also certain I read somewhere that those programs that have not been rewritten to scale properly on retina displays have to be interpolated by the OS, so it's quite possible that, from Mac to Mac, browser to browser, the same font is going to look quite different. As of right now, the only browsers I can confirm having Retina support are Safari (big surprise there, right?) and Chrome.
(For more information on this subject, see this question: https://apple.stackexchange.com/questions/54905/retina-macbook-pro-fonts-look-terrible)
You might be able to vary the fonts used based on pixel-ratio with a media query, if you are really committed to trying to hit this moving target.
#media all and (-webkit-min-device-pixel-ratio: 2) {
/* all your retina-display-tweaked settings, here */
}
Maybe this is a little bit too much effect but i think this is what your are looking for.
Adding a text inner shadow effect with :before & :after
.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 3px; left: 3px }
.depth:after { top: 4px; left: 4px }​
jsFiddle: http://jsfiddle.net/4GAkK/

Give a CSS styled div a "border-left-image"

Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
Thoughts?
border-image is now supported in all the major browsers (2014-05-22)
Demo with a single border-left-image
Demo with different left and right images.
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.
Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)
Good solution : Chrome AND Firefox compatibility :
http://jsfiddle.net/Yas34/954/
missing border-style: solid to current "good answer"
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).

Hide HTML form legend using CSS

How can I hide an HTML form legend from visual browsers, using CSS, in an accessible way?
legend { display: none; }
is not an option because, as I understand it, this will 'hide' the legend from screen readers. Other attempts I've made do not remove the legend from the layout - i.e. it continues to take up space.
Added as an answer instead of a comment so I can get more points. :-)
If you really want legends, have you tried putting a span inside the legend and positioning/manipulating that?
I understand this works in IE7 and Firefox...
You can't do this in Firefox because it is a bug in the browser.
You can read more here
Browser Bugs
Updated with replacement for -9999px hack ( http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ ) :
HTML:
<legend><span>Your description</span></legend>
CSS:
legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
For what it's worth - and I'm sure I'll get flamed for this - legend tags are one of the few places I deliberately break the spec by leaving them out. I replace them with a heading of the appropriate level which provides the same information to the user but without the browser bugs.
(I'm happy to hear about the real-world downsides of this if anybody can see some)
edit: Oh and you should ask yourself why assistive technology users would want to hear the legends when your browser using users don't. If the answer is simply to satisfy the HTML specs, use display:none and be done with it - don't hinder the user experience of one group by providing useless information just for a formality.
Solved and tested in IE7, IE8, IE9, FF, Opera, Safari and Chrome. The legend will be read from screen readers, and users will not see it:
<legend><span class="accessibility">Your description</span></legend>
and then, in CSS:
legend span.accessibility {
position:absolute;
left:-9999px;
width:100px;
height:auto;
overflow:hidden;
}
Yes, there's something special about it. It's a replaced element like many form elements. Browsers have a very specific default formatting. Moreover it can't be forced to behave like a regular element using display:block or display:inline, causing attempts to override with CSS to ... not work well.
There are some well documented techniques that can help you accomplish SOME effects with legends, though workarounds are necessary for a semblance of cross-browser compatibility.
http://www.tyssendesign.com.au/articles/css/legends-of-style/ ...
Also see the revised version posted a year or so later.
Many versions of Firefox specifically ignore both display:none and absolute positioning.
You could try:
legend
{
position: absolute;
top: -1000px;
}
I know this is 2 years too late, but using visibility: hidden seems to work 'in an accessible way' in FF.
You can use a combination of visibility and position rules, see below:
legend {
visibility: hidden;
position: absolute;
}

Resources