My goal is to get such effects with borders in pure css. I want to ask You is it possible (or I have to use images)? Do I have to use so kind of span attribute or a outline or something else? Maybe You know were I can find tutorial how to do it?
Another possibility that doesn't use borders, but is pure CSS is some wacky work with pseudo elements.
For example:
p:after {
content: '';
background-color: red;
position: absolute;
width: 20px;
left: 0;
top: -2px;
bottom: -2px;
z-index: -1;
}
You can see the demo here: http://jsbin.com/iduvoj/1/edit
Here is another demo of your last example: http://jsbin.com/igotul/1/edit
Now this depends on a few things, like how many elements you'll be stacking, whether or not your paragraph can have a solid background color, etc. But there's a chance it'll work.
It also only depends on :before and :after which are fairly well supported: http://caniuse.com/#search=before
This will be tricky.
The best I can offer you using borders is CSS border-image, which will indeed allow you to design pretty much arbitrary border designs. You can read more about it on MDN.
It has the advantage that it's designed to handle stretching images across the length of the border and having separate images for each side and corners, etc, as necessary so it's very flexible.
I won't give an example beyond those on the MDN page linked above, because the CSS code itself is relatively simple; the main thing you'll need to get it working will be the actual images, and that's something you'll need to provide yourself.
However the main problem you'll have with border-image is browser support. It's a relatively recent addition to CSS, and some fairly modern browsers don't support it. That includes IE10. Depending on what you need, that may scupper this as a solution.
So the alternative solution that will work better cross-browser is simply to have the borders defined as background images. This is fairly obvious, and actually works quite well. If the boxes can vary in height a lot then you may get issues with scaling, but this can be avoided by using multiple background images.
Hope that helps.
Related
I am trying to create a scroll box whereby I can alter the shape and colors of the arrows and also the background of the text area.
I am trying to create the same scroll box as the followings but to no avail.
You can style Chrome, Opera and IE's scrollbars. Unfortunately, Firefox doesn't support it.
Moreover, each browser engine uses its own prefixes and properties to style the scrollbars, some offer more than others.
WebKit example:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: grey;
}
::-webkit-scrollbar-thumb {
background: black;
}
There are plenty of resources online about styling the scrollbars.
Bottom line is:
if you want 100% browser compatibility, use a JavaScript solution (google for "jquery scrollbars").
Great question!
As the other answers state the main scrollbars are styled and handled by the browser so this is not something you would achieve universally in all browsers.
However having said that there is a great resource here to help with this, its not going to produce exactly what you asked for but it will give you some cool scrollbars.
Every browser handles scrollbars with their own styling so changing them and making them look universally the same across browsers is very difficult. I know this is accomplishable with javascript but I'm not able to point you in the right direction of where to start with that.
Do I have to use image to make this kind of... I don't even know how to explain it (my native language isn't english), but it's the transition from the top part to the darker part on this website:
http://thegregthompson.com/
. Do I have to use a image, or can I do this with not-to-overly-complicated-css? (Pseudo elements are fine)
If you are referring to the jagged edge/mini triangles, then for a simpler time you would be better recreating it the way they have using a repeating http://thegregthompson.com/wp-content/themes/GregThompson/assets/img/border-top.png.
I'm sure it would be possible in pure css, but it definitely wouldn't be 'not-to-overly-complicated' and my first thought is there would be a lot of unnecessary mark-up.
I hope this helps
The best way is to use an image. You could probably do some advanced Javascript in a canvas element, but it's the long, hard and unnecessary way.
The site uses this image
That's what they are using:
.sub_hold_top {
height: 10px;
background-image: url('../img/border-top.png');
width: 100%;
float: left;
}
Full path of Image
I've made the jump from HTML table layout for designing webpages to CSS about a week ago and have since been reading more about it. Yesterday, I read a long post here on Stack overflow where users were knocking float and how deprecated they are for layout. There was a lot of talk about inline-block being used in its place.
I have an HTML5 design that I just finished and it looks fantastic in Firefox and Chrome, but when tested in Internet Explorer 7, 8, and 9, the design absolutely explodes. It seems to me that anything in this design that I've floated right is not honored in IE. It just seems to wrap under whatever is to the left of it.
I'd like to know if I'm OK with floats or if I should I be using inline-block instead. An example of how to have two divs next to one another where one is on the left side and the other on the right, using inline-block would be nice.
Floats were never meant for layout.
They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all.
Eric A. Meyer, in Floats Don’t Suck If You Use Them Right
The early web was influenced by print/academic publications where floats are used to control the flow of text around figures and tables.
So why did we use them for layout?
Because you can clear a footer below two floated columns, float layout
came into being. If there had ever been a way to “clear” elements
below positioned elements, we’d never have bothered to use floats for
layout.
Today, the CSS Flexible Box Layout Module flex and the CSS Grid Layout Module grid are optimized for user interface design and complex layouts and are expected to complement each other.
Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts.
Flexbox and Grid are—as of this writing—W3C candidate recommendation and candidate recommendation draft, respectively. Flexbox is supported by all major browsers and has known issues in IE11. Grid is supported by all major browsers but IE11 supports an older version of the spec.
This question is from 2012 and the other answers are outdated.
Floats should not be used for layout anymore (though you can still use them for the original purpose - floating text around images).
Flexbox is now widely supported and is better for layout.
Floats should work fine, although it depends on how you've used it - how about a link to your design?
inline-block doesn't work correctly in Internet Explorer versions less than 8: http://www.quirksmode.org/css/display.html
You can use this example in inline
<div id="firstdiv">
That is the first div
</div>
<div id="seconddiv">
That is the second div
</div>
style.css
#firstdiv{
display:inline;
background-color: #f00;
}
#seconddiv{
display:inline;
background-color: #00f;
}
it will be work at IE8 and higher but if you wanna use it in IE6 and 7 make the following code in style.css
#firstdiv{
display:block;
background-color: #f00;
float: left;
}
#seconddiv{
display:block;
background-color: #00f;
float: right;
}
if you use HTML5 and CSS3 and you want it work with IE6 read the following article 5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress
you can read that article too it is very useful difference between block, inline and inline-block
I'm making more of an effort to separate my html structure from presentation, but sometimes when I look at the complexity of the hacks or workarounds to make things work cross-browser, I'm amazed at huge collective waste of productive hours that are put into this.
As I understand it, floats were never created for creating layouts, but because many layouts need a footer, that's how they're often being used. To clear the floats, you can add an empty div that clears both sides (div class="clear"). That is simple and works cross browser, but it adds "non-semantic" html rather than solving the presentation problem within the CSS.
I realize this, but after looking at all of the solutions with their benefits and drawbacks, it seems to make more sense to go with the empty div (predictable behavior across browsers), rather than create separate stylesheets, including various css hacks and workarounds, etc. which would also need to change as CSS evolves.
Is it o.k. to do this as long as you do understand what you're doing and why you're doing it? Or is it better to find the CSS workarounds, hacks and separate structure from presentation at all costs, even when the CSS presentation tools provided are not evolved to the point where they can handle such basic layout issues?
Clearfix is unnecessary most of the time, and the popular version of hack is needlessly verbose and complicated.
You can get clearing effect by applying overflow:hidden to the container. If container doesn't have fixed height, it will stretch to size of content anyway. It's not a hack, but specified behavior that works in all browsers.
And when you really need overflow:visible you can still clear without extra element in the markup:
.container::after {
content:""; /* not "."! */
display:block;
clear:both;
}
and that's perfectly standard CSS 2.1. In IE versions that don't support CSS 2.1, hasLayout happens to have desired effect:
.container {
zoom:1;
}
Yours is the right approach. Rules are created for those who do not understand them. If you know all pros and contras, make your own call.
You are particularly justified in this case. CSS decided to ignore common wish to separate content A from content B horizontally, so you have to choose a hack you dislike least. I compare the three solutions already presented here.
Your solution is bad because it changed content of the document, inserting element C whose only purpose is visual separation between A and B. Content should not serve layout purpose.
Karpie’s solution is slightly worse (in my book) because it does the same in a sly way. Pseudo element ":after" was not designed for that. It has a great advantage, however, of never actually changing the HTML.
PorneL’s solution achieves desired separation between A and B by radical change of properties of A. The change will not only separate A from B, but also separate A from preceding content, change the way width of A is calculated and so on. Of course, sometimes it’s perfectly OK, but you have to be aware of those unexpected side effects.
The choice is ours.
I definitely don't agree with the idea of using extra markup just to clear divs.
I favour the 'group' approach - putting class="group" on the parent div, with the following CSS:
/* Clear groups of floats by putting class="group" on their parent */
.group:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
And in an IE-specific stylesheet for IE6/7:
/* IE7 */
.group
{
min-height: 1px;
}
/* IE6 */
* html .group
{
height: 1%;
}
This was detailed in CSS Mastery, by Andy Budd. It stretches semantics a little bit, but it makes sense - you're grouping together floated divs, which obviously have some relation to each other.
edit: I wouldn't consider this a huge hack or workaround either - the method has been around for years in various incarnations, (usually known as the 'clearfix' method), and I don't see it going away anytime soon.
Is there any workaround for IE which makes me able to use border-image? I'm developing a site and it's working properly in every browser but IE. I need to mimic these bars
I could use the ie-css3.htc hack but border-radius works only with the four corners together (which doesn't apply here, 'cause the top border isn't rounded) and the filter css property (for gradient) doesn't work with border-radius at all (it fills the whole element ignoring the border radius limits). In case there's no workaround for this, how would be the best way for doing this?
The .png files are unnecessary. Just use CSS3 pie: http://css3pie.com/
Get rid of the proprietary IE filter entirely, and use (heh, the proprietary) -pie-background:linear-gradient(values) instead.
Works harmoniously with individually rounded corners: border-radius: 0 5px 5px 5px
In that case, the top-left corner would be no border-radius, and the other corners (clockwise) would be at 5px each.
Then use behavior:url(path_to/pie.htc); in the same style.
Remember also that the path_to is relative to the document being viewed, not the CSS file that calls it. Make sure to check that if it doesn't work right off the bat.
I've tested this plenty of times and it works like a charm.
Additional information:
If sometimes your styling appears and vanishes, try giving your element a position:relative and a specified z-index. The way CSS3 PIE works, it plays with the z-index and can make your styled gradients (and rounded corners, etc.) appear underneath the background if not specified, particularly if you use negative margins or something odd like that.
The only real solution might be to make your corners or sides images. Its looks as though everything is the same size just has an expandable width. so it should be farely easy to code with almost no lag time for load.
This is why I stick the the concept of using what is proven available. Meaning, if your target market is using IE7+ you should be conscious while designing and programming, so you dont run into small problems like this.
All this CSS3 and HTML5 is awesome stuff but we, as developers, are still limited to what everyone see's. If you want to have an even playing field for all users, then you can rely on new coding practices until you can do things, like border-radius, across the board in all browsers.
On the flip side, you might just not care about what IE users see; therefore you can just have the different style as a browser enhancement, for people who use the other browsers.
Take a really wide image of that red gradient with the proper 4 corner cutouts, save it as an image (transparent PNG on corners since you are not supporting IE6).
For each of those header areas you will wrap it like so:
<div class="outer"><div class="inner">ENQUETE</div></div>
You set this image as background on both of those elements, offset one of them so you can get the image endcaps on both beginning and end. Adjust the spacing/shift until you are clear on both round segments.
.outer {
background: transparent url(redgradient.png) no-repeat 0px 0px;
margin: 0 10px 0 0;
}
.inner {
background: transparent url(redgradient.png) no-repeat 100% 0px;
position: relative;
left: 10px;
}
Hit the exact same issue and gave IE<=9 via conditional comments a fall-back. However, this solution is now broken with the latest IE10 prev4 still not supporting border-image and also does not support IE conditional comments. Back to the drawing board...
Working on the solution we should really use: feature testing.
Using Modernizr which adds CSS3 class names to html tag and testing for border-image (do things the web standards way) or no-border-image (give IE users the best you can do but not the same experience as compliant browsers and display an IE visible only link to your page that tells them how to get a better experience: drop IE for example).
No, but the ie-css3.htc thing may be the only possible work around if that's the one I'm thinking of. Or was there another js script I'm thinking of that solved this? Can't remember.