I am trying to create image arc like below. I am able to make semicircle but I am not sure how to make the center more thick and outer side thinner of an arc.
Or should I use a image of the arc.
Arc style:
This is very easily done using a pseudo element.
To make it thinner at its end's one set the border width to 0 on all side but the right.
body {
background: black;
}
div {
position: relative;
display: inline-block;
font-size: 30px;
color: lightgreen;
margin: 40px;
}
div::after {
content: '';
position: absolute;
right: -20px;
top: -30px;
height: 100px;
width: 80px;
border-radius: 50%;
border: 0 solid lightgreen;
border-width: 0 5px 0 0;
}
<div>JK</div>
If you're trying to draw your arc with CSS (and you aren't supporting certain legacy browsers), you can achieve the effect by manipulating the border of an element as in this prototype example…
.arc {
height: 100px;
width: 80px;
border: 0 solid #f00;
border-right-width: 5px;
border-radius: 50%;
position: relative;
}
.arc>span {
position: absolute;
top: 50%;
right: 15px;
transform: translateY( -50%);
color: #f00;
text-transform: uppercase;
font-weight: bold;
font-family: 'Arial', sans-serif;
font-size: 30px;
}
<div class="arc"><span>Foo</span></div>
Which has the added advantage of not obscuring the background of the element behind it with a solid color, too.
html{
background:black;
}
#moon {
color:lightgreen;
line-height: 110px;
text-align:center;
font-size:30px;
width: 90px;
height: 120px;
border-radius: 50%;
border-right:6px solid lightgreen;
}
<div id="moon">
JK
</div>
Related
Creating a circle around a letter or text works fine, but in my case I only want to circle a single letter within a word (which is within an H1 tag):
.large {
font-size: 5em;
}
.circle {
border-radius: 50%;
padding: -0.5% 5% 0% 5%;
background: #fff;
border: 10px solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Fiddle is here: https://jsfiddle.net/henzen/zwph2nsv/4/
This produces:
Notice that the circle is conforming to the H1 height (I think) - I need it to be compressed vertically, ie the vertical padding needs to be the same as the horizontal, tightly wrapped around the "e".
Is this possible, or would I need to separate the "e" from the "Text" completely in the HTML?
I have tried Unicode chars (eg, ⓔ), which work, but cannot be reliably styled across browsers.
Thanks for any pointers.
You could use a pseudo element.
.large {
font-size: 5em;
}
.circle {
position: relative;
color: red;
}
.circle:after {
content: '';
width: 39px;
height: 44px;
border: 4px solid red;
position: absolute;
border-radius: 50%;
left: -5px;
top: 27px;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
use a pseudo element.
Try This: https://jsfiddle.net/2gtazqdy/12/
* {
margin: 0;
padding: 0;
}
.large {
font-size: 5em;
}
.circle {
height: 50px;
width: 50px;
display: inline-block;
padding-left: 20px;
}
.circle::after {
display: inline-block;
height: 50px;
width: 50px;
z-index: 1;
position: absolute;
top: 18px;
left: 4px;
content: "";
color: red;
background: transparent;
border: 10px solid red;
border-radius: 50%;
}
My output:
try this
for your html do <h1> <span> C </span> ircle </h1>
then in the css define your h1 span
and give it padding, in the shape of a rectangle you could use this =
padding: 20px 10px;
then add a border, for example =
border: 5px solid #ddd;
then at last give it a border radius, this is a bit tidious to figure out but just play around with the pixels and you'll eventually get it right how you want it.
for example =
Border-radius: 20px
your html:
<h1> <span> C </span>ircle </h1>
your total css:
h1 span{
padding: 20px 10px;
border: 5px solid #ddd;
border-radius: 20px;
}
If you want to make a circle, the following is needed:
display: inline-block (or display: block)
same width, height and line-height
text-align: center
Use em to correspond with the font-size of the container.
Example
.large {
font-size: 5em;
}
.circle {
display: inline-block;
width: 0.8em;
height: 0.8em;
line-height: 0.8em;
text-align: center;
border-radius: 50%;
background: #fff;
border: 0.05em solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Please try this code
.large{
text-align: center;
font: 40px Arial, sans-serif;
color:#000;
font-weight:bold;
}
.circle {
border-radius: 50%;
background: #fff;
border: 6px solid red;
padding: 3px 10px;
text-align: center;
font: 28px Arial, sans-serif;
color: #000;
font-weight: bold;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
I am trying to recreate the decorative line under the heading. Is there anyway that I can do this using just HTML and CSS? Does anyone have any experience in doing something similar?
I thought about doing something like this:
<p>———•———</p>
unfortunately the outcome is not as expected.
I would use a bottom border for the line and then a pseudo element for the dot.
The dot uses use border-radius to make the element spherical. Then we use background-color to make it white and set the border color to the same color as the background, allowing us to mask out parts of the bottom border.
body {
background-color: salmon;
}
h2 {
margin: 1rem 0 0.5rem;
padding-bottom: 0.5rem;
font: 2rem/1.25 Arial, sans-serif;
color: white;
border-bottom: 1px solid white;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
z-index: 5;
transform: translateX( -50% );
bottom: -13px; /* border thickness + half height */
left: 50%;
width: 6px;
height: 6px;
background-color: white;
border: 10px solid salmon;
border-radius: 50%;
}
<h2>Portfolio</h2>
One caveat with this approach is that you will need sufficient space between the dot and the text above, otherwise, the border thickness of the dot that is used to mask out the bottom border will overlay/mask your text. See example below:
body {
background-color: salmon;
}
h2 {
margin: 1rem 0 0.5rem;
padding-bottom: 0.5rem;
font: 2rem/1.25 Arial, sans-serif;
color: white;
border-bottom: 1px solid white;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
z-index: 5;
transform: translateX( -50% );
bottom: -23px; /* border thickness + half height */
left: 50%;
width: 6px;
height: 6px;
background-color: white;
border: 20px solid gold;
border-radius: 50%;
}
<h2>Portfolio</h2>
You could also do something similar but make the content of the pseudo element a bullet •.
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 want to remove the background color of border-image and position the border-image to center of each side of my div. Any idea how I can do this?
Here is my JSFiddle.net
HTML:
<div>WELCOME</div>
CSS:
div {
background-color: #99FF00;
text-align:center;
font-family: arial;
color: #454545;
font-size: 20px;
width: 200px;
height: 100px;
line-height:100px;
margin: 50px 50px;
outline: 4px solid #000000;
border: 30px solid #FF0000;
-webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
-o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
}
I want to achieve this:
Any help would be very much appreciated. Thanks!
Here is a working fiddle: http://jsfiddle.net/chajadan/f1pnws6v/8/
The following lines were getting in the way of the border-color change, if you remove them you'll see the border as you wanted:
-webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
-o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
Then I refactored the code to display the same images with divs. I used this reference to vertically align the side images: How to vertically align an image inside div
There is quite possible extraneous css and/or elements present. I didn't clean it down.
I've played around a bit and come up with this FIDDLE.
If you look at the border-images definitions, the key is that the images are 'corner' images, and you can just repeat them over the middle section.
So in the fiddle, I just put the green text in the middle and absolutely positioned some ASCII diamonds. - not very elegant.
CSS
.holder {
outline: 6px solid gray;
border: 1px solid gray;
width: 200px;
height: 100px;
position: relative;
}
.diamond1 {
font-size: 40px;
position: absolute;
top: -12px;
left: 50%;
}
.diamond2 {
font-size: 40px;
position: absolute;
bottom: -10px;
left: 50%;
}
.diamond3 {
font-size: 40px;
position: absolute;
top: 20px;
left: -1px;
}
.diamond4 {
font-size: 40px;
position: absolute;
top: 20px;
right: -1px;
}
.textspan {
display: block;
border: 1px solid green;
background-color: green;
margin: 25px auto;
color: white;
height: 48px;
width: 160px;
text-align: center;
line-height: 48px;
}
You can try placing a div inside another div. The inner div contains the green-colored background. You can also use table
Instead of having the images as border-images, why not have them background-images on some divs that are absolutely positioned?
Below is the CSS explaining the divs with background images of diamonds that are absolutely positioned.
div.greenBox {
background-color: #fff;
color: #454545;
font-family: arial;
font-size: 20px;
height: 160px;
line-height: 100px;
margin: 50px;
outline: 4px solid #000000;
position: relative;
text-align: center;
width: 280px;
}
div.whiteBox {
background-color: #99ff00;
display: block;
height: 90px;
position: absolute;
right: 38px;
top: 30px;
width: 200px;
}
div.diamond1, div.diamond2, div.diamond3, div.diamond4 {
background:url('http://i58.tinypic.com/2chuwrd_th.png') no-repeat;
display:block;
width:30px;
height:30px;
}
.diamond1 {
position: absolute;
right: 46%;
top: 0;
}
.diamond2 {
position: absolute;
top: 40%;
}
.diamond3 {
bottom: 0;
position: absolute;
right: 46%;
}
.diamond4 {
position: absolute;
right: 0;
top: 44%;
}
and here is the html markup
<div class="greenBox">
<div class="diamond1"></div><div class="diamond2"></div>
<div class="whiteBox">
WELCOME
</div>
<div class="diamond3"></div><div class="diamond4"></div>
</div>