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.
Related
I am using the last version 3.3.0, but since 3.2.0 I have this issue. The inferior round corners do not connect.
With 3.2.0:
With 3.1.1:
I just found if I add the following line:
background-color: #ffffff !important;
and changing the:
padding: 15px;
to
padding: 0px;
to the class:
.panel-body
it breaks the inferior round corners.
How can I force the panel-body to have a white background and 0px padding?
http://jsfiddle.net/Khrys/730sjq8n/
Add the following style:
.panel-body {
border-radius: 4px;
}
The issue was that while you gave the container a border and a border-radius, you had the content within the container a background of white with no border-radius. Therefore, you had a round box with a square block inside it, thus cutting off the border slightly.
Add a border radius to the content allowed the content to fit inside your container.
Alternatively, you can remove the background color:
.panel-body { background-color: transparent;
}
That would also be a fix.
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.
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;
}
I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.