.banner {
width: 34px;
height: 52px;
position: relative;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
float: right;
padding-left: 10px;
padding-top: 4px;
}
.banner:after { # How can I make this same behavior work inline?
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 25px solid transparent;
border-left: 9px solid white;
}
This is what is produces:
How can I create this shape inline?
Everything I tried didn't work because it seems position and negative margins aren't supported in email.
Use it as an image because pseudo-element content does not appear in the DOM. These elements are not real elements. As such, they are not accessible to most assistive devices. So, never use pseudo-elements to generate content that is critical to the usability or accessibility of your pages.
Read more
Related
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I'm building a component that will be used by others. I need to build a ribbon that needs to be responsive and adapt to the content of the ribbon.
I know how to do it using fixed sized borders, as shown in this example.
But if I change the text inside the ribbon, I get something like
this.
Which css technique can I use to make this component?
IMPORTANT: I can't use JS. Only CSS3 and HTML.
Here is a pure CSS solution, where the width of the ribbon will adapt to the width of the content:
.ribbon {
float:left;
clear: left;
display: inline-block;
position: relative;
height: 40px;
margin:12px 0;
padding: 0 4px;
color: rgb(255,255,255);
font-size: 10px;
font-family: verdana, sans-serif;
font-weight: bold;
background-color: rgb(255,0,0);
box-shadow: -2px 2px 2px rgb(0,0,0);
}
.ribbon::before {
content: '';
display: inline-block;
position: absolute;
top: 12px;
left: -24px;
z-index: -12;
width: 12px;
height: 16px;
border: 12px solid rgb(255,255,255);
border-top-color: rgba(0,0,0,0);
border-right-color: rgb(215,0,0);
}
.ribbon::after {
content: '';
display: inline-block;
position: absolute;
top: 6px;
right: -14px;
z-index: 12;
width: 28px;
height: 28px;
background-color: rgb(255,255,255);
transform: rotate(45deg);
box-shadow: inset 2px -1px 1px -1px rgb(0,0,0);
}
.ribbon span {
display: inline-block;
position: relative;
left: 6px;
width: 66%;
margin-top: 4px;
line-height: 16px;
}
<div class="ribbon">
<span>Ribbon Example</span>
</div>
<div class="ribbon">
<span>Ribbon Example with lots more text</span>
</div>
<div class="ribbon">
<span>Ribbon Example with a very large amount of text to show what happens when the ribbon contains an entire sentence</span>
</div>
Play around with line-height on the text (or add it). Increase the line-height px amount.
It'd be nice to see a jsfiddle of this in action where I can help you.
I tried to insert into my site a border-radius. It should look like:
I use Font Awesome and Bootstrap (in Fiddle I can’t insert it). This is how I tried to do that: http://jsfiddle.net/24oehpeh/
This is the code:
.ikonka:hover{
border: 2px solid;
border-radius:100%;
}
<div class="ikonka">f</div>
What did I do wrong?
You need to set a width on your element. As it stands, the content f is wrapped in a div, which is a block level element. This will occupy maximum horizontal space available.
.ikonka {
border: #fff 2px solid;
border-radius: 50%;
height: 20px;
text-align: center;
width: 20px;
}
.ikonka:hover {
border-color: #000;
}
<div class="ikonka">f</div>
I choosed to use the pseudo element "before" for this solution.
It gives you the benefit like "a second element", where you can more freely style it without making to many tricks with the main element.
Updated, has a perfectly round circle now.. :)
.ikonka {
position: relative;
border: 2px solid transparent;
display: inline-block;
/*padding: 4px 10px; removed */
background-color: black;
color: white;
width: 24px; /* added */
height: 24px; /* added */
line-height: 24px; /* added */
text-align: center; /* added */
}
.ikonka:hover:before {
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
<div class="ikonka">f</div>
The div must not be set to auto-width (which would be 100%).
The border should be transparent, so there are two pixels of invisible border.
A border radius of 50% suffices since it bends half of each side.
To make it look like your example, some font styling is necessary.
Result:
body{ background-color:#2C2F34; }
.ikonka{
width:32px;
height:32px;
border: 2px solid transparent;
border-radius:50%;
color:white;
cursor:default;
text-align:center;
font-weight:bold;
font-size:26px;
font-family:sans-serif;
}
.ikonka:hover{ border-color:white; }
<div class="ikonka">f</div>
Try this.
.ikonka:hover{
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.ikonka {
width: 100px;
height: 72px;
text-align: center;
background-color: black;
font-size: 51px;
color: white;
vertical-align: middle;
position: relative;
display: inline-block;
padding: 16px 8px;
}
<div class="ikonka">f</div>
Is there any way to create the border on the left with css ?
Here is a way to do it using CSS; you are just layering a Parallelogram and a Rectangle:
.espanolIcon
{
width: 300px;
height: 100px;
padding-left: 30px;
}
.rectangle {
position: absolute;
top: 0px;
left: 200px;
width: 200px;
height: 100px;
background-color: green;
border-radius: 0px 0px 30px 40px;
}
.arrow-left {
position: absolute;
top: 0px;
width: 300px;
height: 100px;
background-color: green;
-webkit-transform: skew(22deg);
transform: skew(22deg);
border-radius: 0px 0px 30px 40px;
}
h1 {
color: white;
}
<div class="espanolIcon">
<div class="rectangle"><h1>Espanol</h1></div>
<div class="arrow-left"></div>
</div>
Use a zero-dimension :before with thick, partial borders
By adjusting the top/bottom and left/right values of border-width on the :before pseudo-element, you can effectively change the skew of the triangle. The left position can then be changed to properly align the pseudo-element.
a {
display: inline-block;
position: relative;
margin-left: 14px; /* Should counter `left` value of `a:before` */
padding: .5em 1em;
color: #fff;
font: bold 1em/1 sans-serif;
text-decoration: none;
text-transform: uppercase;
border-radius: 0 0 10px 10px;
background: #75bf41;
}
a:before {
content: '\200B'; /* zero-width non-breaking space */
display: block;
position: absolute;
top: 0;
left: -14px; /* Adjust to align */
width: 0;
height: 0;
border-width: 14px 8px; /* Adjust top/bottom and left/right to skew */
border-style: solid;
border-color: #75bf41 #75bf41 transparent transparent; /* Triangle orientation. */
}
Español
Full css could work, but you should use .png as background-image or perhaps you could use .svg as you can animate and/or change every point or pixel. You might be able to use just CSSbut it would take a lot of leveling and positioning and alot of layers of absolute and relative positioning. As Css would only change the full width of the element, and it can only be used to change the width of elements. What you can do is use .svg, you could map every pixel which could be animated.
I accomplished it using borders and pseudo elements.
<ul>
<li class="lang-item lang-item-6 lang-item-es">
::before
<a>Español</a>
</li>
</ul>
ul {
position:relative;
}
.lang-item {
text-align: right;
position: relative;
}
.lang-item a {
background: #76c53f;
padding: 15px;
color: #fff;
text-transform: uppercase;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 14px;
}
.lang-item::before {
position: absolute;
right: 101px;
top: -15px;
content: "";
display: inline-block;
border-top: 40px solid #76C541;
border-left: 40px solid transparent;
}
jsfiddle
I'm trying to style a blockquote to look like this:
At the moment it looks like this:
(it is supposed to be without the white spaces at the beginning of the blockquote
My HTML/CSS
<blockquote><p>Lore ipsum...</p></blockquote>
blockquote {
margin: 1em 2em;
border-left: 1px solid #999;
padding-left: 1em; }
blockquote:before {
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative; left: -15px;
}
blockquote p:first-letter {
margin: .2em .3em .1em 0;
font-size: 220%;
}
/* without unnecessary font type/color attributes*/
I'm looking for something like position: relative; left: -15px;, but it should work much more reliable than
this (more reliable means with different window sizes... oh and it should be pure css... ;-))
Do you know a solution problem that does not leave any unnecessary spaces behind?
I added a float left and changed the top/left positioning declarations.
blockquote:before{
content: open-quote;
font-size: 6em;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
position: relative;
float: left;
top: .4em;
left: -.15 em;
}
Here is the output. I didn't attempt to match your fonts and colors.
With a position: relative on the blockquote you can easily position the pseudo element with position: absolute. See this jsfiddle demo http://jsfiddle.net/VZxhH/1/
blockquote {
border-left: 1px solid #999;
position: relative;
padding-left: 1em;
margin: 1em 2em;
}
blockquote:before {
content: open-quote;
position: absolute;
font-size: 6em;
left: -38px;
top: -23px;
}