I have a galery and I´m trying to crop the photos that have height more than 150px to have all images with the same height. Actually I have this --> http://postimg.org/image/9t605lhdv/
I would like to make something similar to this --> http://postimg.org/image/v1zjjwuyp/
For example this website have this "crop", but I can not get it seeing his css. --> http:// postimg.org/image/vq8e2utoh/
My html is:
<ul class="preview-grid container" id="preview-grid">
<li>
<a href="photo.jpg" data-largesrc="photo.jpg" data-title="photo-title" data-description="photo">
<img src="photo.jpg" alt="photo.jpg" class="img">
</a>
</li>
<li>
<a href="photo2.jpg" data-largesrc="photo2.jpg" data-title="photo-title" data-description="photo2">
<img src="photo2.jpg" alt="photo2.jpg" class="img">
</a>
</li>
<li>
<a href="photo3.jpg" data-largesrc="photo3.jpg" data-title="photo-title" data-description="photo">
<img src="photo3.jpg" alt="photo3.jpg" class="img">
</a>
<li>
<a href="photo4.jpg" data-largesrc="photo4.jpg" data-title="photo-title" data-description="photo4">
<img src="photo4.jpg" alt="photo4.jpg" class="img">
</a>
</li>
</ul>
and my css is:
.preview-grid {
list-style: none;
padding: 20px 0;
margin: 0 auto;
text-align: center;
width: 100%;
color: #d6d6d6;
}
.preview-grid li {
display: inline-block;
margin: 12px 10px;
vertical-align: top;
height: auto;
width: 22%;
}
.preview-grid li>a, .preview-grid li>a img {
border: none;
outline: none;
display: block;
position: relative;
width: 100%;
height: auto;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;
border-top-left-radius: 15px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/* max-height: 136px; */
-webkit-box-shadow: 0 0 13px 0 #E8E8E8;
box-shadow: 0 0 13px 0 #E8E8E8;
}
I hope someone can help me!!
Thank you!!
Solved Here: Image As YOu Want
In Example The last6 image is cropped. as you asked in question!
Another hover effect if want to use Hover over effect
CSS Modified
.preview-grid {
list-style: none;
padding: 20px 0;
margin: 0 auto;
text-align: center;
width: 100%;
color: #d6d6d6;
}
.preview-grid li {
display: inline-block;
margin: 12px 10px;
vertical-align: top;
height: 150px;
width: 22%;
}
.preview-grid li>a, .preview-grid li>a img {
border: none;
outline: none;
display: block;
position: relative;
width: 150px;
height: 150px;
overflow:hidden;
border:1px solid yellow;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 15px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;
border-top-left-radius: 15px;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/* max-height: 136px; */
-webkit-box-shadow: 0 0 13px 0 #E8E8E8;
box-shadow: 0 0 13px 0 #E8E8E8;
}
.preview-grid li>a img {
width:100%;
height:auto;
}
Related
I want to achieve drop-down button as per following design image. See drop-down menu starts just after middle of button. My problem is that button has transparent background to utilize background image from root parent div.
So far I have achieved following image. As I said above, I want to achieve white edges outside of border-radius.
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 185px;
margin: auto;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
Any suggestion would be really helpful.
Use ::after ::before pseudo elements for the dropdown and apply separate background-image as marked in the image. Apply position:absolute and align then in the top left and right corners based on the design.
It's very simple. You have achieved almost 99%. Just add below styles to your CSS of .div-user-header-list as below:
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
padding-top: 20px;
margin-top: -20px;
z-index: -1;
}
See the updated fiddle here: https://jsfiddle.net/8ukj3wy1/1/
Check this one out:
https://jsfiddle.net/sLy7fnzg/
Essentially use a negative margin to move the .div-user-header-list up and use relative positioning to enable z-indexes.
Also, to resolve the issue with the half border, remove the border from the .div-user-header-1 and add a whole element as a ::before to the .div-user-header like so:
.div-user-header::before {
content: "";
background: #9CB2C7;
width: 210px;
height: 30px;
display:block;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
z-index: 1;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
body{
background-color: grey;
}
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 203px;
margin: auto;
overflow: hidden;
/*background-color: #fff;*/
}
.div-user-header-list:before,
.div-user-header-list:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.div-user-header-list:before {
/*right: -20px;*/
left: 1px;
top: -10px;
border-radius: 0 0 0 10px;
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
-webkit-box-shadow: -10px 0 0 0 #fff;
box-shadow: -10px 0 0 0 #fff;
}
.div-user-header-list:after {
/*left: -20px;*/
right: 1px;
top: -10px;
border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
-webkit-box-shadow: 10px 0 0 0 #fff;
box-shadow: 10px 0 0 0 #fff;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
/*margin-top: -14px;
z-index: -9;
padding-top: 14px;*/
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
</style>
</head>
<body>
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
</body>
</html>
I am trying to attach a select dropdown to a search box. So far, I kind of got it working on larger monitors:
However, the problem is, when I resize my browser window to < 1100px width, the "Everything" gets cut off:
I tried applying a min-width of e.g. 150px to the dropdown but it doesn't seem to be having any effect. Adding a min-width to the container works, but when I resize the window, the controls break to the next line. I'm guessing that the approach I took (using a nested 12-column grid with no gutters to align the dropdown, text box, and button) isn't the right way to do this.
FIDDLE: https://jsfiddle.net/jh2fgmo7/
How can I attach the select dropdown to the text box but keep a minimum width equivalent to the select box's largest value (using CSS only)?
Update-
This is the desired result when resizing:
CSS
body {
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
font: normal 16px Arial, Helvetica, Verdana, Geneva;
}
body:after {
content: " ";
display: block;
clear: both;
}
.tbnav {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background: #303030;
min-height: 55px;
}
.tbnav .logo {
width: 11.39241%;
float: left;
margin-right: 1.26582%;
margin-left: 3.16456%;
background: url(/images/tb-logo.gif) no-repeat;
height: 27px;
min-width: 150px;
margin-top: 14px;
}
.tbnav .search {
width: 62.02532%;
float: left;
margin-right: 1.26582%;
}
.tbnav .search .searchcat {
width: 11.01695%;
float: left;
height: 27px;
margin-top: 11.5px;
}
.tbnav .search .searchcat select {
height: 33px;
width: 100%;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.tbnav .search .searchbox {
width: 78.81356%;
float: left;
margin-right: 0;
margin-left: 0;
height: 27px;
padding: 1px;
padding-left: 5px;
margin-top: 11.5px;
}
.tbnav .search .searchbtn {
width: 6.77966%;
float: left;
height: 27px;
margin-top: 11.5px;
}
.tbnav .search .searchbtn input {
height: 33px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="tbnav">
<div class="logo"></div>
<div class="search">
<div class="searchcat">
<select name="c">
<option>Everything</option>
</select>
</div>
<input type="text" name="search" class="searchbox" />
<div class="searchbtn">
<input type="submit" class="button button-primary button-small" value="Go" />
</div>
</div>
</div>
</body>
</html>
Personally, I would do .searchcat { position: absolute; }, set it to the desired width, then set .searchbox { padding-left: /*whatever*/; }. As a quick fix. You might throw some Javascript in there if the <select> contents will be variable (i.e. loaded dynamically) just to check what the widest value is.
After some fiddling, I used a basic table and styled it with CSS instead. It works just how I wanted now. Hope this helps someone! (If anyone wants the underlying Sass script, let me know!)
Fiddle
http://jsfiddle.net/dzoppzzL/
CSS
body {
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
font: normal 16px Arial, Helvetica, Verdana, Geneva;
}
body:after {
content: " ";
display: block;
clear: both;
}
.tbnav {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background: #303030;
min-height: 65px;
}
.tbnav .logo {
width: 150px;
float: left;
margin-right: 1.26582%;
margin-left: 3.16456%;
background: url(/images/tb-logo.gif) no-repeat;
height: 27px;
margin-top: 19px;
}
.tbnav .search {
margin-top: 13px;
border: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
margin-left: 3.16456%;
width: 62.02532%;
float: left;
margin-right: 1.26582%;
}
.tbnav .search .searchcat {
height: 35px;
padding: 0px;
border-right: 1px solid #808080;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.tbnav .search .searchcat select {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
background: #f7f7f7;
height: 39px;
width: 150px;
color: #808080;
border: 0;
outline: none;
box-shadow: none;
}
.tbnav .search .searchtxt {
width: 100%;
padding: 0;
}
.tbnav .search .searchtxt .searchbox {
border: 1px solid #FFF;
border-left: 0;
width: 100%;
min-width: 200px;
margin-right: 0;
margin-left: 0;
height: 35px;
padding: 1px;
padding-left: 5px;
outline: none;
box-shadow: none;
}
.tbnav .search .searchbtn {
width: 100px;
height: 35px;
padding-left: 5px;
}
.tbnav .search .searchbtn input {
height: 39px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
HTML
<table class="search">
<tr>
<td class="searchcat">
<select name="c" id="catsel">
<option>Everything</option>
</select>
</td>
<td class="searchtxt">
<input type="text" name="search" class="searchbox" />
</td>
<td class="searchbtn">
<input type="submit" class="button button-primary button-small" value="Go" />
</td>
</tr>
</table>
I have problem, I can't align two buttons in one line.
I tried to set padding of span class pptext2 but without success.
Here is code
http://jsfiddle.net/71782p4L/1/
HTML
<div class="ppdiv">
<button class="ppenvelope"><img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATE MESSAGE</span></button>
</div><!--Zatvoren ppdiv-->
CSS
.ppdiv{
padding-top:22px;
padding-left: 19px;
}
.ppdiv img{
padding:10px;
font-size: 20px;
}
.ppenvelope{
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.pptext{
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
}
.pptext2{
display: inline-block;
color:#4c6974;
padding-top: 15px;
padding-bottom:13px;
padding-left: 13px;
}
I would set float: left; on both buttons and overflow: hidden; on .ppdiv. To make sure both buttons stay the same height, also set height on them (e.g. height: 48px;). You can also remove the span.pptext2 element altogether, unless you need it for other purposes. Take a look at the fiddle: https://jsfiddle.net/igi33/ck4w6cLq/1/.
HTML:
<div class="ppdiv">
<button class="ppenvelope">
<img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
</button>
<button class="pptext">PRIVATE MESSAGE</button>
</div>
CSS:
.ppdiv{
overflow: hidden;
}
.ppenvelope, .pptext {
float: left;
border: none;
height: 48px;
}
.ppenvelope{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
}
.ppdiv img{
padding:10px;
}
.pptext{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
color:#4c6974;
}
Use vertical-align: middle; on both buttons.
.pptext {
background: none repeat scroll 0 0 #c9e0e6;
border: medium none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
vertical-align: middle;
}
.ppenvelope {
background: none repeat scroll 0 0 #b2d4dd;
border: medium none;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
vertical-align: middle;
}
https://jsfiddle.net/71782p4L/2/
Here you are.
.ppdiv {
height:43px;
overflow:hidden;
}
.ppdiv img {
padding:10px;
}
.ppenvelope {
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
float:left;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}
I designed a navigation menu which looks like the image here:
I want to code it with css3 rounded corners and box-shadows, not using any images.
Problem is the rounded corner to the left of the first menu-item, and the one to the right of the menu... I call it a "reverse" rounded corner...
It should have to change color on :hover.
Is there any way to get this done in css only? And how?
HTML
<div class="menu">
<div class="outer_bg_left">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
<ul>
<li class="menu_item_cont"><div class="menu_item">Item 1</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 2</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 3</div></li>
</ul>
<div class="outer_bg_right">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
</div>
CSS
.outer_bg_left, .outer_bg_right {
float: left;
width: 70px;
background-color: #994;
height: 15px;
overflow: hidden;
position: relative;
z-index: 10;
}
.outer_bg_left .outer {
height: 25px;
border-radius: 0 10px 0 0;
background-color: #fff;
}
.outer_bg_right .outer {
height: 25px;
border-radius: 10px 0 0 0;
background-color: #fff;
}
.outer_bg_left .outer_shadow, .outer_bg_right .outer_shadow {
box-shadow: 0 0 5px 2px rgba(0,0,0, .7) inset;
padding-bottom: 10px;
margin-bottom: -10px;
height: 25px;
}
.outer_bg_left .outer_shadow {
border-radius: 0 10px 0 0;
padding-left: 30px;
margin-left: -30px;
}
.outer_bg_right .outer_shadow {
border-radius: 10px 0px 0 0;
padding-right: 30px;
margin-right: -30px;
}
.menu_item_cont {
background-color: #994;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 5px 2px rgba(0,0,0, .7);
background-color: #994;
display: block;
float: left;
}
.menu_item {
border-radius: 0 0 10px 10px;
background-color: #994;
height: 20px;
padding: 5px 10px;
font-family: Arial;
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.menu_item:hover {
background-color: #000;
border-radius: 10px;
height: 30px;
line-height: 30px;
color: #fff;
}
http://jsfiddle.net/gXQzU/4/
It's just my first attempt, but I think it looks quite promising.
My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. Some people call this a negative border radius or an inverted corner. See the white arrow in the image below.
To extend the blue <li> to the edge of the <ul>, I'm planning to do something like this:
li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
Is there a better way to extend the <li> to the edge of the <ul>? Obviously, I'll include the webkit and mozilla border radius CSS as well.
The main thing I'm unsure about is that outer corner underneath the bottom right corner of the active <li>. I have some ideas, but they seem like hacks. Any suggestions?
NOTE that the <ul> is indicated in grey, but it would be white in the real design. Also, I'm planning to use Javascript to position the <div> correctly when an <li> is selected.
Well, as it turns out, I managed to solve the problem myself. I hacked together a demo -- check it out.
Essentially, several additional DOM elements are required and a fair amount of CSS. And as mentioned in the link provided by #Steve, a solid background is required. I don't believe there is any way to do this over a gradient background or other pattern.
I ended up with HTML like this:
ul.selectable {
padding-top: 1em;
padding-bottom: 1em;
width: 50%;
float: left;
}
ul.selectable li {
margin: 0 3em 0 4em;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
}
ul.selectable li.active {
margin-right: 0;
}
ul.selectable li.active dl {
background-color: #4f9ddf;
}
ul.selectable li dt {
background-color: #dfd24f;
padding: 1em;
margin-left: -2em;
margin-right: -2em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ul.selectable li dd {
padding: 0.25em;
background-color: #fff;
}
ul.selectable li.active dt {
background-color: #4f9ddf;
margin-right: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-khtml-border-top-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
ul.selectable li.active dd.top {
-webkit-border-bottom-right-radius: 8px;
-khtml-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
-webkit-border-top-right-radius: 8px;
-khtml-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
<ul class="selectable">
<li>
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
<li class="active">
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
<li>
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
I haven't optimized any of the CSS as I just hacked it together. But perhaps it will help someone else. I've only tested this in Google Chrome on Mac OSX.
Cleaner Solution (Less Code & Background Gradient Allowed)
See the fiddle (or another), which is using this html:
<ul class="selectable">
<li>Title</li>
<li class="active">Title</li>
<li>Title</li>
<li>Title</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
And this css (the key is to allow the border-radius and border-width on the pseudo-elements to make the inverted circle for you; I've omitted the gradient code.):
ul.selectable {
padding-top: 1em;
padding-bottom: 1em;
width: 50%;
float: left;
}
ul.selectable li {
margin: 1em 1em 1em 2em;
padding: 1em;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
background-color: #dfd24f;
position: relative;
}
ul.selectable li.active {
margin-right: 0;
background-color: #4f9ddf;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-khtml-border-top-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
ul.selectable li.active:before,
ul.selectable li.active:after {
content: '';
position: absolute;
left: 100%; /* I use this instead of right: 0 to avoid 1px rounding errors */
margin-left: -8px; /* I use this because I am using left: 100% */
width: 8px;
height: 8px;
border-right: 8px solid #4f9ddf;
z-index: -1;
}
ul.selectable li.active:before {
top: -8px;
border-bottom: 8px solid #4f9ddf;
-webkit-border-bottom-right-radius: 16px;
-khtml-border-bottom-right-radius: 16px;
-moz-border-radius-bottomright: 16px;
border-bottom-right-radius: 16px;
}
ul.selectable li.active:after {
bottom: -8px;
border-top: 8px solid #4f9ddf;
-webkit-border-top-right-radius: 16px;
-khtml-border-top-right-radius: 16px;
-moz-border-radius-topright: 16px;
border-top-right-radius: 16px;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
I came up with a solution that requires less markup. In summary, instead of using margins it uses white rounded borders, then we position the active li behind the white rounded borders to achieve the inverted border-radius effect.
http://jsfiddle.net/zrMW8/
<ul class="selectable">
<li>
Title
</li>
<li class="active">
Title
</li>
<li>
Title
</li>
<li>
Title
</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
And less CSS too! (this is mind bending):
a { color: #000; text-decoration: none;}
ul.selectable {
padding: 1em 1em;
width: 40%;
float: left;
}
ul.selectable li {
margin: -1em 0 0 0;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border: solid #fff 1em;
position: relative;
}
ul.selectable li a {
background-color: #dfd24f;
padding: 1em;
display: block;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
}
ul.selectable li.active {
margin: -1em -1em -1em 1em;
border: solid #4f9ddf 1em;
border-left: solid #fff 1em;
background-color: #4f9ddf;
position: static;
}
ul.selectable li.active a {
margin: 0 0 0 -1em;
border-left: solid #4f9ddf 1em;
background-color: #4f9ddf;
position: static;
text-indent: -1em;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
margin-left: -1em;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
To tell you the truth I'm not sure it's a better version, it does make gradient/image backgrounds easy (for non active li's, at least) but you can't apply an image/gradient background to the body. It's also "bad magic" en the sense that it works in a non-intuitive way.
To do this over a non-solid bg, I don't think you can do it with CSS, but you could use canvas or SVG to the same effect - not exactly what you asked for, though.
However, there does appear to be a proposal for negative border radius that would solve the problem. Maybe some day, right.
This nice Inverse Border Radius in CSS tutorial could do the trick. Explains how to do inverse border radius for tabs. But it could be easily adapted to streamline your css since it uses :after instead of creating too many extra elements.