I want to make background for menu list item looks as a tab, how can this be done in CSS and to add icon beside it
CSS
#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
You can also use a pseudo and transform:
a {
display: inline-block;/* fallback*/
position: relative;
overflow: hidden;
border-radius:5px 5px 0 0;
padding: 1em 3em 1em 2em;
}
a:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120%;
height: 200%;
z-index: -1;
background: tomato;
border-radius:inherit;
transform: skew(35deg)
}
nav {
display: flex;
margin: 1em;
}
<nav> some link
some link
some link
</nav>
Use a zero height DIV with a big border:
.tab {
width: 100px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<div class="tab"></div>
More info here: https://css-tricks.com/snippets/css/css-triangle/
Related
How do I crop the parts of the "Today" red div that are not on the special div in order to make it look like a bookmark? Desired result is shown on the second image.
Thank you!
Actual image:
Desired image:
Html:
<div class="panel">
<div class="special">Special $120.00</div>
<div class="pr2">Today</div>
</div>
CSS
.special {
text-align: center;
margin-top: 20px;
}
.panel {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
height: 70px;
}
.pr2 {
background-color: #d13a2f;
color: #ffffff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
line-height: 35px;
text-align: center;
letter-spacing: 1px;
top: 5px;
right: -48px;
left: auto;
position: absolute;
padding-top: 20px;
width: 140px;
overflow: hidden;
display: block;
opacity: 0.6;
}
JSFiddle overlapping
Add overflow: hidden and position: relative to the .panel div:
.panel {
overflow: hidden;
position: relative;
}
Then adjust positioning values to your needs.
Updated fiddle
So I want to create something what you can see in Codepen however as I was getting into point to add arrows into both ends I realized that I have started that all out in a wrong way. My CSS will grow way to long for such small thing and will have probably problem with other elements on the page. I could not figure out what's the best approach to create these left and bottom lines with arrows in both ends and value from attribute so I hope some of you can point me out to right direction.
.ruler-left:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom {
position: relative;
display: inline-block;
text-align: center;
width: 225px;
height: 2px;
float: right;
margin-right: 5px;
margin-top: 110px;
font-size: 0px;
}
.ruler-bottom:before {
content: '';
position: absolute;
top: -5px;
left: 0;
border-top: 5px solid Gainsboro;
border-right: 10px solid black;
border-bottom: 5px solid Gainsboro;
background-color: Gainsboro;
}
.ruler-bottom:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
<div class="shape-container">
<hr class="ruler-left" data-height="30 mm">
<div class="shape">Shape image</div>
<hr class="ruler-bottom" data-width="30 mm">
</div>
I played with your problem a little...
See my Fiddle
I kept most of your CSS, but dropped the :before pseudos wich were rendering arrows.
I kept the :after pseudos wich show dimentions.
To draw the left and right arrows, I used classes wich only draw a triangle with the border of an element.
I applied those two classes on another element (I used hr again... Could be something else) placed before and after your «ruler» hr.
These three hr are wrapped in a div for positioning and rotation.
CSS
.arrowRight{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #000000;
}
.arrowLeft{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 16px 8px 0;
border-color: transparent #000000 transparent transparent;
}
/* -------- */
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
.shape-container {
display: block;
position:absolute;
width: 260px;
height: 260px;
background: Gainsboro;
padding: 2px;
}
.ruler-left-div {
position:absolute;
left:-104px;
top:110px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
transform: rotate(-90deg);
}
.ruler-left {
display: inline-block;
width: 190px;
height: 2px;
}
.ruler-left:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom-div {
position:absolute;
bottom:10px;
right:8px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
}
.ruler-bottom {
display: inline-block;
width: 190px;
height: 2px;
margin-bottom:8px;
}
.ruler-bottom:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
HTML
<div class="shape-container">
<div class="ruler-left-div"><hr class="arrowLeft"><hr class="ruler-left" data-width="30 mm"><hr class="arrowRight"></div>
<div class="shape">
shape image
</div>
<div class="ruler-bottom-div"><hr class="arrowLeft"><hr class="ruler-bottom" data-height="30 mm"><hr class="arrowRight"></div>
</div>
I need help with line spacing between text
and a picture just to know what I need:
Here is my CSS:
.popular_courses h3 {
font-size: 20px;
text-align: center;
text-transform: uppercase;
margin-top: 60px;
margin-bottom: 20px;
}
.popular_courses h3 {
border-bottom: 1px solid #ddd;
line-height: 0.1em;
margin: 60px auto 20px;
width: 70%;
}
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
}
I think this is a better way to achieving the desired result instead of adjusting the line height.
.popular_courses h3 {
position: relative;
text-align: center;
}
.popular_courses h3:before {
content: "";
position: absolute;
top: 50%;
left: 15%;
width: 70%;
margin-top: -1px;
height: 2px;
background-color: #ddd;
}
.popular_courses h3 span {
position: relative;
display: inline-block;
background-color: #fff;
padding: 0 20px;
}
<div class="popular_courses">
<h3><span>POPULAR COURSES TITLE</span></h3>
</div>
You have to use padding property for your class around "POPULARNI KURZY".
For eg:
padding: 10px 20px;
will add 10px padding (space) on left and on right sides, and 20px padding on top and bottom sides.
What you need is something like:
padding: 50px 0;
(This will add 50px padding on left, 50px on right and 0 for bottom and top sides).
You can do this:
CSS
.popular_courses {
position:relative;
display: block;
width: 70%;
text-align: center;
margin 0 auto;
z-index:1;
}
.popular_courses:before {
position:absolute;
content:"";
height: 1px;
background: #000;
width: 100%;
z-index:2;
left:0;
top: 50%;
transform: translateY(-50%);
}
.popular_courses h3 {
position: relative;
display: inline-block;
line-height: 0.1em;
background: #fff;
padding: 0px 30px; // -> ADJUST HERE YOUR PADDING NEED
z-index:3;
}
HTML
<div class="popular_courses">
<h3>teste</h3>
</div>
DEMO HERE
Theory
You are looking for the padding option:
// padding: top right bottom left
padding: 1px 2px 3px 4px;
you can also use padding like this:
// padding: top&bottom left&right
padding: 0px 10px;
or with separate statements:
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left:10px;
Practice
if your text is inside the span tag then your css should be like:
.popular_courses h3 span {
background: #fff none repeat scroll 0 0;
padding: 0 20px;
}
so that the text will have a 20 pixel padding on both sides!
.heading {
text-align: center;
position: relative;
z-index: 10;
}
span {
display: inline-block;
background: #fff;
padding: 0 10px;
position: relative;
z-index: 10;
}
.heading:after {
content: '';
display: block;
border-bottom: 3px solid #ccc;
width: 100%;
position: absolute;
z-index: 5;
top: 50%;
}
<h1 class="heading">
<span>Some nice heading</span>
</h1>
Hi, If you can manage to cover the background-color of the text like
to white or to the same color of background-color, then this
example can work.
.popular_courses h3 span { padding: 0 15px; }
With this line of code you will put space in the left and right side of the text and it will be filled with white background.
I've created a shape purely by CSS. The following link includes my work.
http://jsfiddle.net/kaHek/119/
CSS:
#applicationStatus {
position: relative;
width: 630px;
height: 140px;
top: 20px;
left: 40px; }
ul.applicationStatus {
list-style: none; }
li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood {
height: 140px;
background-color: #767676;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
*display: inline;
margin-right: 30px;
padding: 10px;
color: white;
font-size: 18px;
text-align: center;
line-height: 150px;
/* vertical-align: middle; */ }
li.applicationStatus:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 30px solid #77a942;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 0px; }
HTML
<div id="applicationStatus">
<ul>
<li class="applicationStatus">Başvuru Alındı</li>
<li class="applicationStatusGood">Dil Sınavı</li>
<li class="applicationStatusNoGood">Sözlü Mülakat</li>
<li class="applicationStatus">Hibe</li>
</ul>
</div>
What I'm trying to achieve is the following:
I'm struggling with aligning the arrow part of the image. I created that part with :after pseudo-element with the help of css3shapes.com but I can't seem to align it properly.
Setting the margin value of the after selector works for vertical positioning but not for horizontal positioning.
What should I do?
Check the Jsfiddle
http://jsfiddle.net/arunberti/kaHek/120/
margin: -10px 90px 0 10px;
Margin Rules:
Margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
In your case, this works fine: margin: -10px 90px 0px 10px;
Make sure that last value of this should equal with your padding: 10px; in li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood method.
Alternatively, you can do this:
fiddle
Relavant code:
li {
position:relative;
}
li:after {
right:-30px; /* width of element */
top:0;
}
Check out this code you can achieve exactly what you are seeking for...! :)
jsfiddle
Code:
HTML:
<div id="css3">
<ul>
<li class="css3">HTML5/CSS3</li>
<li class="css3">Shapes</li>
<li class="css3">Hello World!</li>
</ul>
</div>
CSS:
#css3 {
position: relative;
width: 630px;
height: 140px;
top: 20px;
left: 40px;
}
ul.css3 {
list-style: none;
}
li.css3 {
height: 140px;
background-color: #76a942;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
padding: 10px;
color: #fff;
font-size: 1em;
text-align: center;
line-height: 150px;
margin-left: 50px;
}
li.css3:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 40px solid #76a942;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 10px;
}
I need show a notication modal window.. But since its a fluid layout the position changes on bigger screens.
How can i position the modal window below the link like in image. I want it in the exact position. How do i go about doing it?
This should work as a base for you.
HTML
<div class="notificaton-bar">
<div class="notice">Notification
<div>
Here is the applicable note.
</div>
</div>
</div>
CSS
.notificaton-bar {
background-color: #999999;
padding: 0 10px;
}
.notice {
position: relative;
display: inline-block;
background-color: inherit;
font-size: 1.5em;
min-width: 140px;
padding: 10px 5px;
text-align: center;
}
.notice div {
display: none;
width: 130px;
padding: 10px;
font-size: .75em;
text-align: left;
background-color: inherit;
border-radius: 10px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -75px;
margin-top: 10px;
}
.notice div:before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #999999;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.notice:hover div {
display: block;
}