I want to envelop my div in borders that look somewhat like this:
http://na.leagueoflegends.com/ ,
but I'm wondering what's the right approach to make this.
Is it just a border with images or is it something more complicated to get that border shape?
You can create any shape of your div using CSS3 and then apply borders to it. Have a look at
https://css-tricks.com/examples/ShapesOfCSS/
Related
How would one create the following 'paintbrush' effect as a border around a div in CSS? The div in this case would be the red box.
Here is another example of a similar situation. The div in this case would be the blue box.
I would say that your best bet is to go with the border-image property
You can find some more info/examples here http://www.css3.info/preview/border-image/ You just need to find the stroke effect that you like and apply it in your case to the border-image
Heres a example
Codepen http://codepen.io/noobskie/pen/EVgaQL
I've got a CSS drop down menu that I'm trying to build, and the background of the drop down has a faded/tapered box shadow:
I'm having trouble pulling off how to get the box shadow to actually taper/fade off.
Here's where I'm at right now: http://jsfiddle.net/Shpigford/f9aKR/
I've tried using :before and :after pseudo selectors, among other things, but can't quite get it right.
For clarification, I'm specifically only needing help with the shadow on the drop down. My jsFiddle is a stripped down version to keep the example as straightforward as possible.
I've added a before element.
gave it a gradient background (from transparent to a semi transparent black) to achieve the top to bottom fade.
gave it an inset box shadow to achieve the in -> outfade.
Take a look -> http://jsfiddle.net/f9aKR/22/
Edit the amount of fade/colors as you want.
I'm trying to create a group of chevron shaped divs, and came across this article where the ribbon has an internal triangle shape.
http://css-tricks.com/snippets/css/ribbon/
I was trying to add an external border which would follow the triangle, which would achieve the affect I'm looking for without needing to use images.
Unfortunately, when I tried adding a box-shadow, I ended up with a square shadow around the div, not a shadow around the triangular bit.
Any suggestions on how to acheive this?
I don't think there is currently any simple solution to create CSS shadows of shapes other than rectangles and rounded rectangles (using border-radius). But I think a possibility (albeit more complicated) would be using CSS3 transform rotations along with the box-shadow. You can pick up some techniques here which perhaps you can modify to suit your need.
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
it's size is much larger than my 64x64 image
the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
The simplest solution would be to add an appropriate background-color, but that would only work when you need an offset of 0 0, like your example.
The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.
I'm interested in creating a table with rounded corners without using images.
How can this be accomplished?
My idea was that I could wrap the table with a div and to set the rounded corners to the div.
By taking a glance at this fiddle you can see that the tables border overwrites the border of the div. Is there a style which prevents from the overwriting?
Why dont you just take the border of the table out?
The trick to this working is, as #Luis implies, to take the border off the table and apply it to the wrapping div, applying the border-radius to that element.
JS Fiddle demo.
You can look into PIE CSS3 for IE6/7/8 and then CSS3 effects for Chrome/FF/Opera (http://css3pie.com/)
If you don't want the table border you could set border:none on the table element. If you still want the table border, you can set a padding:10px on the div.