using the below I can make a bit of a rounded arrow:
-webkit-border-radius: 20px 50px 50px 20px;
border-radius: 20px 50px 50px 20px;
But it is not sharp enough, the arrow box must have a fluid height so it can contain text that is responsive. Is this possible to do with css3? You can see what I'm trying to achieve by going to http://dev.aaronpitts.ch/lhc/ and clicking on the SDBS box. I just want more of an arrowed right side.
Many thanks
Try this:
HTML
<div id="arrow">
<p>This is a content</p>
</div>
CSS
#arrow {
background-color: lightgreen;
border: 0.2em solid darkgreen;
border-radius: 2em 5em 5em 2em;
height: 5em;
text-align: center;
width: 10em;
}
Live example
Using em data unit you'll have a size that will change based on the size of the font of your client. Bigger text size means a bigger arrow and a bigger radius, the same for small texts. This way you can have an adaptive arrow.
Hope that helps!
Experiment with your border radius values here:
http://www.css3generator.in/border-radius.html
If you can't get what you want with that tool, you're going to need to look for a more complicated solution. Here's one that uses a span element, a css rotation, and jQuery.
http://jsfiddle.net/nG6xZ/5/
<!doctype>
<html>
<head>
<style>
div{
background:#aaeeee;
border:2px solid #99dddd;
border-radius: 30px 5px 5px 30px/30px 5px 5px 30px;
padding:10px;
position:relative;
width:200px;
margin-bottom:20px;
}
div .arrow {
background:#aaeeee;
border:2px solid #99dddd;
border-width:2px 2px 0 0;
position:absolute;
right:-17px;
top:50%;
margin-top:-16px;
width:30px;
height:30px;
display:block;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
border-radius:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div>Text Here</div>
<div>Text<br />Here</div>
<script>
$('div').each(function() {
$(this).append('<span class="arrow"></span>');
});
var resizeArrow = function() {
$('span.arrow').each(function() {
var parent = $(this).parent(),
height = parseInt(parent.css('height'),10),
padding = parseInt(parent.css('padding-top'),10)*2,
border = parseInt(parent.css('border-top-width'),10)*2,
hypotenuse = height + padding + border,
sides = Math.sqrt((hypotenuse * hypotenuse) / 2);
$(this).css({
"width":sides+"px",
"height":sides+"px",
"right":-sides/2+"px",
"margin-top":-sides/2+"px"
});
});
}
$(window).ready(resizeArrow);
$(window).resize(resizeArrow);
</script>
</body>
</html>
Related
I am trying to apply a CSS rule that fits the next scenarios independently on the layout inside the button.
scenario 1: text
scenario 2: text + icon
scenario 3: icon + text
This is the desired behavior:
For now, I am applying padding to the button, so it works for scenario 1 and then I tried to add a margin to the icon image. However, it is added to the padding and its side becomes bigger than the other.
You can see the issue in the following image.
Can this be achieved with the only CSS?
code
<button class="pzl-button pzl-button-base primary">BUTTON</button>
<button class="pzl-icon-button pzl-button-base primary">BUTTON<img class="pzl-icon-button" src="assets/icon/chevron.svg"></button>
<button class="pzl-icon-button pzl-button-base primary"><img class="pzl-icon-button" src="assets/icon/chevron.svg">BUTTON</button>
css
.pzl-button-base {
margin: 8px;
background: none;
text-decoration: none;
border: 1px solid transparent;
display: inline-block;
padding: 3.5px 16px;
font-family: "Rubik", sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.pzl-button-base.primary{
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
background: #E9B56F;
color: #FAFAFA;
}
.pzl-button-base.primary img {
filter: invert(99%) sepia(35%) saturate(0%) hue-rotate(173deg) brightness(113%) contrast(96%);
height: 1.5em;
}
.button-chevron-inverted {
transform: rotateZ(180deg);
}
.pzl-button-base img {
padding: 0 6px;
}
This is the CSS box model, which might help you to visualise the issue you are having:
Any margin you add to the icon image will come on the 'outside' of the padding property.
I am not 100% sure what you are asking, but if you are trying to add a margin between each of the 3 buttons, then you need to apply the margin property to the buttons, not to the icon images.
does this helps ?
.textbox {
position:relative;
display:inline-block;
width: 8rem;
height: 2rem;
border: 2px solid orange;
margin-left:1rem;
background:orange;
}
.text {
position:relative;
width:100%;
display:inline-block;
text-align:center;
color:white;
margin-top:7px;
}
.leftarrow {
position:relative;
display:inline-block;
float:right;
margin-right:1rem;
}
.rightarrow {
position:relative;
display:inline-block;
float:left;
margin-left:1rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="textbox"><div class="text">BUTTON</div></div>
<div class="textbox"><div class="text"><i class="fas fa-arrow-right leftarrow"></i>BUTTON</div></div>
<div class="textbox"><div class="text"><i class="fas fa-arrow-left rightarrow"></i>BUTTON</div></div>
I'm new with css, but the thing that i'm trying to do is slightly complicated, at least for me. I have a picture that i want to cover with a circle, transparent from the inside, black from the outside.
this is what I've accomplished so far:
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:6px; left:6px; width:81px;
}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
https://jsfiddle.net/dmL56kek/
now i'm looking to cover the outer of circle with a solid color.
PS: i don't want to apply any style on the image because it won't work in my case.
A little change is css would help and i have used width:78px with a calculation that width of outer div is 70px and border is 4px from left and right.
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
Can anyone write the code to display this shape?
The code so far
html
<a class="steps_boxes" href="#"></a>
css
.steps_boxes {
width:22%;
height:auto;
background:#e7f4ef;
border-radius:6px;
float:left;
margin:0 2%;
padding:20px 0;
}
.steps_boxes:hover {
background:#ff7429;
}
a.steps_boxes {
color:#119865;
font-size:28px;
text-decoration:none;
}
a.steps_boxes:hover {
color:#fff;
}
I do not have 10 reputation to post image, It's basically a rectangle with a semi circle on the bottom center of the rectangle. Can email the pic to anyone who can help.
This is an answer based off of the one by damien hawks. I have included some jQuery so that both shapes change color on hover. You can adapt this to be closer to the code you had provided.
DEMO
HTML:
<div id="rectangle" class="hover"></div>
<div id="halfCircleBottom" class="hover"></div>
CSS:
.hover {
background-color: #e7f4ef;
}
.hovered {
background-color: #ff7429;
}
#rectangle {
margin: 0 auto;
width: 200px;
height: 50px;
}
#halfCircleBottom {
margin: 0 auto;
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
}
jQuery:
$(document).ready(function () {
$('.hover').hover(function () {
$('.hover').toggleClass('hovered');
});
})
With this you can put the rectangle and half circle divs in a container and position them wherever you want.
Is this what you're looking for? I made a jsFiddle doing that. Just click on the link and comment below regarding what exactly you want to do.
Simply used two css classes two make two different shapes and to get the circle to the centre of the rectangle have used margin-left:50px;
I have a page with an image on the left side, and text on the right. When the browser window is resized, or a smaller resolution is used, the text goes behind the image. I want the text to always be beside of the image, and not go behind it.
Any suggestions? http://jsfiddle.net/TYpCq/ (The layout on jsfiddle is a bit off. Nevermind this, I just need to know how to prevent the text going behind the image)
HTML:
<div id="indishopmain">
<p><strong>Test shop image</strong> by <strong>no one</strong></p>
<div id ="canvasshopwrap">
<div id="canvasshophead">
<p>Blabla</p>
</div>
<div id="canvasshoptext"</p>
<p>The high-quality print on a <span style="color:#01A07E;font-family:Cusmyrb;">stretched canvas</span> lets the artwork just pop of the wall, it’s almost magical. It’s easy to hang up and will keep it’s color brillance as well as the shape for a long time. We are sure, you will love it forever. Note: the size 20 x 20cm comes with a complementary easel.</p>
</div>
</div>
<div id="indishopimg">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="500px" />
</div>
</div>
CSS:
#indishopmain {
width:100%;
padding:0em;
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
margin-top:-11.9em;
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#canvasshophead {
display:inline-block;
width:11em;
background-color:#5020B8;
height:2em;
border-radius:3px;
-moz-border-radius:3px;
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:30px;
text-align:center;
line-height:2;
margin-top:0;
}
#canvasshopwrap {
margin-left:60%;
width:11em;
display:inline-block;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
}
#canvasshoptext {
width:11em;
}
Without knowing what it is you're trying to accomplish (things in your code make me wonder if they are by design or not) I will assume you're trying to have a static element centered in the middle of the page. If you're going for a fluid layout (something that will automatically degrade into mobile devices for instance) the solution will look different.
jsfiddle here: http://jsfiddle.net/RbA92/
I find that adding temporary background colors to elements can be very helpful when debugging. For the purpose of this exercise I've left them in there for you so you can easily see what's going on. I would also suggest putting these colors on your original fiddle (and change margin to padding to REALLY see what's going on). You had a few things in there that weren't behaving as you intended... I think :)
Here's a little breakdown of the styles for you. I commented out the styles I "removed" and annotated the things I added and why.
body { text-align: center; } /* centers all content */
#indishopmain {
padding:0em;
/*width: 100%;*/
background-color: blue;
overflow: hidden; /* allows us to float elements inside a non-floated element */
width: 700px; /* gives the browser a literal size to render, which keeps the elements from moving when the window is resized */
text-align: left; /* keeps child elements from inheriting the text-aling: center we put on the body */
margin: 0 auto; /* this is what actually centers our item. use this with body {text-align: center;} */
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
/*margin-top:-11.9em;
margin-left:10%;*/
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
float: left; /* float this bad boy all the way to the left */
}
#canvasshopwrap {
/*margin-left:60%;*/
width:11em; /* having this in em could break your layout. consider putting this in px to keep it from getting too big for it's area and being pushed to the bottom */
/*display:inline-block;*/
background-color: red;
float: right; /* float this one all the way to the right */
}
#canvasshophead {
/*display:inline-block;*/
width:11em;
background-color:#5020B8;
/*height:2em;*/
border-radius:3px;
-moz-border-radius:3px;
padding: 0 0 .5em 0; /* it's better to size the CONTENT how you want, so this box will always contain it. size thie box but leave the contents dynamic and you could end up with the content outside of your container */
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:2em;
text-align:center;
line-height:2;
margin:0; /* remove any browser-specific formatting */
padding: 0; /* ditto */
}
#canvasshoptext {
width:11em;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
padding: 0; /* remove any browser-specific formatting */
margin: 0; /* ditto */
}
Hopefully this is the answer you are looking for.
Remove this margin-top:
#indishopimg img {
margin-top:-11.9em; <--- here
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
If you want the image beside the text, move the image into the paragraph containing the text and add float:left to the CSS above.
Let assume that I have image with border: 1 px solid black because i want it to have border. But for more i want rounded corners so i give border-radius: 10px. But this now looks bad because corners don't have border. Is there possibility in html and css to do something which give borders to corners or answer is maybe somewhere in (for example) in jQuery?
sure just put the border on too.. and where there's a background color you can use an image, however IE support will be non-existant, but you might try CSSPie for enhancement for it. I think also some browsers do have a problem clipping on image to the round corners but am not too sure on overall support or fixes, perhaps putting the border on a parent div then rounding the image inside it might give a neat effect?
Example Fiddle
div, img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
background: #0f0;
width: 200px;
margin: 50px;
text-align: center;
line-height: 40px;
}
HTML:
<div>rounded with border</div>
<img src="http://placekitten.com/100/100/" alt="">
Update: Webkit browsers do have problems with this if it's actually an image that needs rounding with borders, here's one workaround that seems to help:
New Example Fiddle
(view with webkit to see difference between second and third images)
HTML:
<div class="ri"><img src="http://placekitten.com/100/100/" alt=""></div>
CSS:
div {
margin: 50px;
text-align: center;
line-height: 40px;
width: 100px;
height: 100px;
}
.ri {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
border: 1px solid #000;
}
.ri img {
display: block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
}
the background-clip is supposed to help the background clip to the padding-box, which should in theory stop a background-image or color from extending into the border, but in itself it doesn't appear to work very well, so I nested the image and rounded both it and the parent div and then put the border onto the parent div, Webkit was happy ;)
You might try this curved-corner project on Google Code that purports to allow the border-radius CSS property to work cross-browser.
you can write with css3 & for IE you can download piecss3 js.
Example
div{
width:200px;
height:200px;
background:red;
color:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
border:2px solid yellow;
behavior: url(PIE.htc);
}
check this
http://jsfiddle.net/sandeep/KDBGV/
The other ways is:
CSS:
.container {
background:gray;
color:#fff;
margin:0 15px;
}
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
HTML:
<div class="container">
<b class="crvtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
Place the content here
<b class="crvbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
This is going to work in all the browsers.
Cheers and Enjoy :)
Well Cris,
The classes are for the spanned elements to create a curvy edges. Simply modify
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
with
.crvtop, .crvbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom * {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
and it will work
Hope that helps..