css-shapes

For a user profile I'm trying to create a circular image plus a horizontal bar with the same height as the image. Also, it should be responsive. It should look as in the image below. In the black bar there will be text. Could someone please help me with the correct CSS? So far I have the code below but this already goes wrong in that the black bar is below the circle and not next to it. But also I don't know how to make the black bar start exactly in the middle of the image, to have the image on top, and to have text in the black bar start sufficiently to the right (while being responsive to

I'm wondering if it is at all possible to achieve a curved border (with a stroke) using only CSS? At the moment I'm creating curved borders for the header of my website using images: I'd like to change this to a CSS solution so that I'm not having to alter images when the amount of content within changes - I need these to be dynamic and responsive, I've managed to draw a curve using border-radius: This works much better for me, but I'm wondering if it is possible to add a stroke to it to make it look a more like the image representation? Any help is greatly appreciated. Here's the code I've

How It Works The .png image represented below is clipped to the text with animation; In Action body { background: #000000; } .Wave-Loader { text-transform: uppercase; font-family: 'Cabin Condensed', sans-serif; font-weight: bold; font-size: 100pt; text-align: center; height: 120px; line-height: 110px; vertical-align: bottom; position: absolute; left: 0; right: 0; top: 100px; bottom: 0; } .Wave-Loader.Wave { background-image: url("http://i.imgur.com/uFpLbYt.png"); -moz-background-clip: text; -o-background-clip: text; -webkit-background-clip: text; background-clip: text; color: transparent; text

I'm wondering if it's possible to archive the following effect with CSS I found these articles that kind of help but the problem is that in my case the tab sides are diagonal not straight vertical lines: http://css-tricks.com/tabs-with-round-out-borders/ http://css-tricks.com/better-tabs-with-round-out-borders/ Is it possible to do? Here's a proof of concept example with pure CSS. It uses pseudo-elements and rotate . It's pretty close to your source image and could get closer with some work. Demo : http://jsfiddle.net/csDP9/9/ HTML : <ul> <li>Sample 1</li> <li class="active">Sample 2</li> <li

Hi I'm trying to create the following Angled Strip Look in HTML & CSS: Just the Blue and Purple area with white after. I can obviously see how to do it using an image but what about HTML/CSS only? Is this possible? Its used on the site - www.africa.dating I know I should have more example code but I'm actually not sure where to begin so I only have the following HTML: Fiddle: http://jsfiddle.net/e2dr5udr/3/ <div id="container"> <div id="blue"></div> <div id="purple"></div> </div> #container { width: 100%; height: 100px; background-color: white; position: absolute; } #blue { width: 100%; height