you may have noticed that Google are changing their design ethic a little, and giving things "rounded ends". Have a look at this pic to see what I mean:
Love it or hate it, lots of people will follow trend. So what is the best way to do rounded ends to a button in CSS? Round / circular buttons are done with
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
Rounded corners are done with :
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
But how to apply a 50% rounded corner to a multiline button of any width, as per the google site?
I have done it with a large pixel value in this codepen https://codepen.io/anon/pen/yjdRXB
But what if the content is very large? Or does Google only plan to use this style on single-line text? I want to replace the 500px value in my pen with a value which works for any font size and any menu item.
Any thoughts on this are appreciated. Thanks!
I think you're in the right track, just set it as larger as it makes you safe thinking about maximum height of button/item/div/whatever. I've checked Google Drive button by inspecting it, its border-radius is set to be 66px.
Notice that I've set the 4 corners in the same border-radius property, 2 of them being 0 just like the example. The border-radius are defined in the following order: top-left, top-right, bottom-right, bottom-left.
.button {
padding: 10px 30px;
background: red;
border: none;
border-radius: 0 100px 100px 0;
}
<button class="button">Hello world</button>
Related
In PyQt5, I have been working on stylesheets. For my tabwidget stylesheet, I would like to use the border-right attribute to set a border between the tabs, but I would like to have a gap at the bottom and top of the border, so the border does not meet the top or bottom of the tabbar, like so:
I was wandering if there is a way to set the border height in the stylesheet, or possibly set the border style to dashed and then set the length of the dashes and gaps? Any method that achieves the border with gaps is appreciated, preferably by using stylesheets. Thanks.
EDIT:
Here is the stylesheet I currently have for the QTabWidget:
QTabBar:Tab {height: 27px; width: 220px; border-top-right-radius: 14px; border-top-left-radius: 14px; padding: 2px;}
QTabBar:Tab:Selected {background-color: white;}
QTabBar:Tab:!Selected {background-color: rgb(0,155,255); border-right: 1px solid black}
QTabBar:Tab:Hover:!Selected {background-color: rgb(240,240,240,92);}
QTabBar:Tab:First:Selected {margin-left: 0; margin-right: 0px;}
QTabBar:Tab:Last:Selected {margin-right: 0; margin-left: 0px;}
QTabBar:Tab:Only-One {margin: 0;}
QTabWidget:Tab-Bar: {left: 5px;}
QTabWidget:Pane {background-color: white; border: 1px solid white;
Yes, you can by using border-image.
This answer is CSS only related, but Qt's implementation follows the CSS specifications very well: https://stackoverflow.com/a/26858151
In short, you create a small square png image with the intended borders (in your case, you'll need to create only the right dashed part, the size depends on the dash pattern you need.
Unfortunately, when using rounded corners Qt "cuts" away half of the border width, so you'll see a small gap outside the border between two adjacent tabs.
I've created a small example of the image which will have a pattern of 6 pixels black and 5 transparent (I forgot to erase the top 2 pixels, you won't need them):
This is how it appears when zoomed in an image editor:
After that, this is what you'll need as a basis for your stylesheet:
QTabBar:Tab {
border-top-right-radius: 14px;
border-top-left-radius: 14px;
border-image: url(border.png) 2 repeat;
padding: 2px;
}
QTabBar:Tab:!Selected {
border-right: 2px;
}
The "2" in the border-image declaration is the border width within the image, the "repeat" is required to tell Qt that the border pattern has to be repeated and not stretched.
Also, remember to set the width of the border too, otherwise the image won't be shown.
And this is the result:
As you can see, the border size is only 1px, with another pixel left outside the tab. Since the issue comes from the usage of rounded corners, I'm afraid that the only solution would be to create a full border image that includes the rounded corners. I tried to play around with negative margins and css positioning, I think that it wouldn't work as expected and might even create issues against different platforms and Qt versions.
I ran into an issue today with Safari (Version 11.0 (12604.1.38.1.7), border-radius, and a large spread drop shadow. This issue doesn't happen in Chrome, FF, or Edge.
The reason for the large drop shadow is to achieve a window like effect where element is visible, and the drop shadow is semi-transparent covering the whole screen.
After some trouble shooting I determined that drop-shadow works fine in Safari, but not when the spread is very large (like here) AND when the border radius of the container all match. Adjust one corner border radius to be one pixel different, and the issue goes away and the drop shadow spread works at the sizes I want.
Here's a quick and dirty CodePen demonstrating the issue.
The button will toggle the equal vs. non-equal border radius class. But feel free to adjust the box-shadow size and note that it works fine up to a certain point (2039px works, 2040px doesn't. This was slightly different from the breaking point I founder earlier in my own code which was ~2019).
I guess I have to paste code from CodePen here too.
HTML
<div class='wrapper'>
<div id='box-shadow-container' class="equal-border-radius">
<div id='box-shadow-fun'>
What's going on here? <br/><br/>
<button id='toggle-radius-class'> Swap Border Radius Class</button>
</div>
</div>
</div>
CSS
body {
display: flex;
flex-direction: column;
min-height: 400px;
}
.wrapper {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
#box-shadow-fun {
padding: 5px;
}
#box-shadow-container {
border: 1px solid #CCC;
box-shadow: 0 0 0 5000px black;
}
.one-different-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 4px;
}
.equal-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
Does anyone know the issue here? I can live with one corner being a pixel radius different, but I don't like not understanding a bug fix as it seems likely to break in the future and I'll still have no idea what's going on.
I don't know what's going on with the unequal border radii, but it seems that Safari doesn't handle very large box shadows well and will refuse to draw it if the spread is too large with a border radius. It does work if you also set a small blur radius (which shouldn't be noticeable except at the very extremes of the shadow):
#box-shadow-container {
box-shadow: 0 0 500px 5000px black;
^^^^^
}
However this will break Firefox. You should detect the Safari browser and only apply this style in Safari.
Play around with the blur radius and spread values to get something that works at the smallest size that you require.
I don't know the cause of the issue but you can fix it without making one of the border radius different by using calc:
.thing-with-box-shadow {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
border-radius: 50%;
// makes the box shadow appear on Safari
border-bottom-right-radius: calc(50% + 0px);
}
Rounded corners on my jQuery sliders only work in Firefox.
Renders correctly in Firefox 17.0.1 (see image below)
Not rendering correctly in Safari Version 6.0.2 (8536.26.17) (see image below)
Not rendering correctly in Chrome Version 23.0.1271.101 (see image below)
Here is the jsfiddle build: http://jsfiddle.net/plasticmonument/TCVH5/1/ (note, I only gave full path url's to the slider images, everything else will be missing)
My HTML:
enter code here
My CSS:
.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}
#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}
My guess is that it's the old "foreground images aren't clipped" bug.
In some browsers, a border radius may be applied, but foreground images of the elements with border-radius aren't restrained by the radius.
I was under the impression that this was something that had been dealt with by the major browsers, but it's not something I've looked into for a while, so I may be mistaken in that. It certainly looks like it's what you're seeing. I remember it was quite a big issue back in the days of Firefox 3.x, but if I recall correctly, the FF team sorted it out somewhere between v4 and v8.
To prove it, add an actual border (eg border:solid black 2px;) to the element, and see what happens. If the border disappears under the image at the corners as it follows the radius, then this is the bug you're seeing.
If this is the problem, then the solutions are:
Use a background image instead; this won't be clipped.
Add an additional layer of markup -- eg a <div> with the existing <img> inside it, and put the border radius on the <div> instead of the <img>.
Ignore it, and wait for browser vendors to fix the issue.
I want to be able to cut off the bottom of a large div (about 2000px) with a curve about 60px deep. Currently I have implemented this by placing a transparent image over the top which cuts it off. The only problem is that some elements on the main div are inaccessible because they are behind the curve overlay.
I really doubt this is possible, even in CSS3, but if anyone has any ideas please share.
Also, if there is a way I can arrange the current setup to allow elements in the main div which are behind the curve to be clicked then that would be just as good.
You could apply a border radius to the very bottom...
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
jsFiddle.
Experiment with the radius' value to get the desired effect.
Alternatively, you could prevent the element being used currently from blocking the pointer with...
pointer-events: none;
How to make this button is CSS with Angled , Drop shadow, Inset shadow with flexibility in width?
I've tried to make it here http://jsfiddle.net/jitendravyas/6RsnN/ but don't how to give angle to it and how to create cut-out border around it.
And button should be flexible in width.
I'm only making this for iphone so full CSS3 is allowed.
The final result is:
pure css blue button http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png
Demonstration of flexibility:
Although I tried to make a button like in the picture, but some parts may not be the same. Would consider it a proof of concept.
This button can be pure CSS only with a lot of extra markup with this markup:
<a class="btn">
<span class="triangle"></span>
<span class="btn_inner">
<span class="triangle"></span>
Back
</span>
</a>
The main trick for creating triangles with box-shadow includes several steps:
Step 1. Create element '.triangle' - it will be a wrap for real triangle.
Step 2. Apply position: absolute;, fix its width and height:
red background-color is onle for demo
Step 3. Create big square element '.triangle::before' — it will be 'real' triangle after step 6
Step 4. Turn it 45 degrees (transform: rotate(45deg)).
Step 5. Add box-shadow.
The result after step 3 is:
Step 6. Add overflow: hidden; Ta-dum!
On .tag_inner use the same trick, but box-shadow should be not inset but normal.
Notice, that if you will use this trick always check what vendor prefixes must be used and place property without prefix on the last place.
Update: Make markup more semantic — only one element for triangle trick.
Here's your angle, but since it is already a border, you can't put a border on it:
body {padding:40px; background-color: #1693da;}
.input {
display:block;
text-decoration:none;
padding:10px 60px;
background:#117ebb;
font-size:60px;
color:#fff;
border-radius: 20px;
box-shadow: 0px 10px 0px #003355;
position:relative;
}
.input:after {
position:absolute;
top:0;
left:-32px;
content:" ";
width: 0;
height: 0px;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
border-right:45px solid #117ebb;
}