Hi,
Can anyone help me to create below mentioned design in css3. I've tried the following property, but still having the problem to get the exact design
background:#c6d92d;
height: 5em;
width: 20em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 5em 5em 1em 1em;
padding:20px;
Thanks
You need more than one div to achieve that.
You must put two other divs (one at left and one at right) white with radius over a black background.
This is an effect I achieved in my site : http://dystroy.org/re7210/ (click "Toutes les recettes").
You do it like this :
_________
/ \
div C | div A | div B
/ \
C and B are white div covering 100% of cells having a black background (which is visible only where the border-radius isn't 0).
In this case, the div at the right of the main one has this css :
#divB {
background-color: white;
border-radius: 0 0 0 10px;
}
Here's my final effect :
And here's my "divB", which should make evident where I have white over black and where I have black over white :
(As you can see, I found easier to compose all this using a table but you probably can do it without table)
The properties you are looking for are:
border-top-left-radius and border-top-right-radius
http://www.css3.info/preview/rounded-border/
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.
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>
I often encounter situations where I want to change the padding-left and padding-right (or border-left and border-top, etc.) of an element, but leave the padding-top and padding-bottom as it otherwise would have been.
2 options:
{padding-left: D; padding-right: C;}
{padding: A B C D;}
where in option 2 I have to use Inspect Element to get the present values of A and C. Option 1 has the disadvantage of being wordy.
So, is there a third option where I can write {padding: A B C D;} except use some CSS word that means "what it would have been if I didn't specify it" for A and C?
Padding is a special property in CSS, because it has different 'signatures'. As far as I am aware, you can't do something like padding: initial initial 1em 1em, but you can use these shorthand properties:
From developer.mozilla.com
/* Apply to all four sides */
padding: 1em;
/* vertical | horizontal */
padding: 5% 10%;
/* top | horizontal | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 2px 1em 0 1em;
Unfortunately, it looks like you will have to spell them out individually if you want to only do padding-bottom and padding-left, or a combination similar to that.
When it comes to padding you can do something like:
.classname {padding: 10px inherit;}
That will set 10px for the top and bottom, and it will inherit the padding of its parent element.
Another option is:
.classname {padding: 10px initial;}
Initial will use the default value which is set for that element.
Depending on the types of elements, sometimes you use auto instead of initial.
By default, all four padding properties are set to 0.
You can set the padding with the shorthand notation, for example:
.yourclass{
padding: 0 10px 0 10px;
}
The order of elements in the shorthand version are: top, right, bottom, left.
Use another class to override the first one.
.first {
padding: 5px;
}
.second {
padding-left: 0 !important;
padding-right: 0 !important;
}
<div class="first second">no left/right padding</div>
I was wondering if it's possible to create a responsive web grid full a width of 1200px, with an exact border of 1px on each square of the grid.
You can see what I'm trying to do here:
http://machinas.com/wip/machinas/website/grid/
I'm using fluid squares for this:
http://fluidsquares.com/
I set each square to bg-color white, and the wrapper around has a bg-color grey, and each square has margin in percentage to give it a border but it doesn't give exact 1px border. Anyone know if it's possible somehow?
this is what the code is so far for each square:
a {
margin: 0.1% 0.1% 0 0;
padding-bottom: 15%;
width: 16.56%;
}
0.09% will give 1 pixel border ( closest as you can get )
a {
margin: 0.09% 0.09% 0 0;
padding-bottom: 15%;
width: 16.56%;
}
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.