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
Related
OK, I have scanned the forums trying to find a solution to my dilemma and have tried everything I found. If someone could please take a look at the following URL: angrybullhartford
When I resize any browser, the problems seem to differ a little, The two images in the right sidebar do not center and scale to a tiny size. The slider at the top of the page is small and off center as well. I had this working at one point and cannot get back to it. If it is something simple and someone could tell me why this is occurring I would appreciate it.
Thank you!
There is some sort of left margin or padding on the slider. It does not line up with the elements below it. When you start to make the page smaller, you can really see this margin I'm talking about.
Anyhow, try this: Change your CSS to
#page .pad {
padding: 40px;
background-color: transparent;
}
This produced a much cleaner result for me, not sure if it's exactly what you want though. Being that you're using BS2, you may have to write some media queries to handle your extra styles.
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.
I'm programming my website and I wanted to create different css for different resolutions.
I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/
Everything done correctly, but when my window resizes for the narrow css, all images are big.
1 Question: How can I resize them in the css?
2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?
Thanks a lot and sorry for my bad english.
This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design
This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:
img {
width: 100%;
}
Not super IE friendly from the sounds of it, but workarounds are explained in the article.
http://unstoppablerobotninja.com/entry/fluid-images
This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Use this for resizing images
#my_image {
width: 50px;
height: 100px;
}
To answer your second question, display: none just hides it. The image will be downloaded
I have created a web page layout using CSS. The CSS and HTML can be found here: http://pastebin.com/Gn25nM8G
I had to use what seems like some funky tricks to get the layout proper. Specifically, to get two of my content blocks in the right place I had to use this CSS:
position: relative;
top: -351px;
I'm wondering if there's a better way to accomplish this layout?
I'm also not sure why there's a big gap at the end of my page? If you create a page from my code you'll see what I'm talking about. Any help would be greatly appreciated.
What if you just try rearranging your elements? Putting everything into two columns and floating each of those?
Here is a quick fiddle to illustrate what I mean:
http://jsfiddle.net/qh75H/3/
Here's my approach. jsFiddle
I have tried to maintain your code and layout as far as possible.
That may or may not be the best approach.
position: relative means you are moving the div, but the the space taken up by the div originally is still occupied.
If you want to move the div's, but make room for other content, position: absolute may work better.
the position: relative could also be causing the whitespace because the boxes you "moved" may still be taking up space, causing the page to run long.
I am very frustrated with trying to use CSS Sprites. I have asked a couple of times here, and got great advice, but still no solution. The problem is that I want my sprites in a horizontal line, not a vertical stack. I can't seem to find an example of this on the web, and all tutorials I have found seem to only describe menus and other vertical stacks.
I have given it my best shot trying to get the widths and display styles right but still to no avail.
The following code is my best shot. I'd appreciate it if anyone could look and tell me where I am going wrong. (Note the image referred to in the code is a 32x32 image with 4 different sprites in the obvious places.)
http://codepaste.net/4kwx2c
You could try
.LICtrlList
{
display: inline;
}
change to
.LICtrlList
{
display: inline-block;
}