According to CSS Tricks, the following CSS syntax would result in left border gradient.
.left-to-right {
border-width:3px 0 3px 3px;
-webkit-border-image:
-webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
}
I'm trying to get the border gradient on the bottom of the element.
I tried changing this
border-width:3px 0 3px 3px;
to this
border-width:0 0 3px 0;
this
border-width:0 3px 3px 3px;
And it doesn't work, can anybody help me with getting that bottom border to work?
You may need a WebKit browser to do this.
Here would be a fiddle for one to work with; http://jsfiddle.net/HsTcf/
Thanks.
border-width: 0 0 3px 0;
is correct.
However, the following changed needed to be made:
... -gradient(right, ...
needed to be changed to
... -gradient(top, ...
and 1 100%; to 100% 1;.
Demo: jsfiddle.net/HsTcf/3
Here is another way that works for bottom borders. This is the complete class declaration from a site example.
#header_bg {
position: fixed;
top: 0px;
width: 100%;
height: 121px;
top: 0px;
background-color: #fff;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important;
z-index: 10;
}
<div id="header_bg"></div>
I am assuming above you are trying to make a fixed header. The most important part of course is the box-shadow property. This will work in most modern browsers as well.
Related
I am trying to make a QSlider that has an absolute gradient and a chunked style in the QSlider::add-page part of the slider.
Following Style Sheet code:
QSlider::groove:vertical {
background: #021017;
BORDER-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
BORDER-radius: 5px;
border: 1px solid #0e566d;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
}
QSlider::sub-page:vertical {
background: #021017;
BORDER-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
And I get the following output:
But as I move the handle the gradient changes based on the height from the bottom of the slider to the handle. I would like the gradient to be based on the height from the bottom of the slider to the top. Meaning changing the handle position will not change the look of it.
Also is it possible to have a chunked out gradient-- like this progress bar?
For the first question: yes, it is possible. I adjusted the style sheet you provided (uncommented things, you will notice them):
QSlider::groove:vertical {
width: 10px;
/* background: #021017;*/
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
border-radius: 5px;
position: absolute;
left: 10px;
right: 10px;
}
QSlider::handle:vertical {
height: 10px;
background: #0b1707;
border: 1px solid #46992b;
margin: 0px -10px;
/* expand outside the groove */
border-radius: 5px;
}
QSlider::add-page:vertical {
border-radius: 5px;
border: 1px solid #0e566d;
/*background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);*/
}
QSlider::sub-page:vertical {
background: #021017;
border-radius: 5px;
border: 1px solid #0e566d;
margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
background-color: #46992b;
}
Summary: style the groove with the gradient and skip the add-page background color.
For the second question, ::chunk is not working, so I think it is not working with the default QSlider. Feel free to implement your own class, which can handle chunks.
I'm creating an application in C++, using QT and stylesheets to design my app. It's working just fine. But I have a quick question,
I'm wondering if there's any way I can throw away the highlighting of a tab when it's selected. I'm building a Qt application and the result is gross :
My qss looks like this :
QTabWidget::tab-bar {
alignment: center;
}
QTabBar::tab {
background-color: #F5FCFE;
border-bottom-color: #C2C7CB;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
height: 60px;
width: 200px;
margin: 10px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #CFEFFC;
}
Thanks for you help
This is a focus frame. To remove it, you should set the tab bar's focus policy to "NoFocus":
tabWidget.tabBar()->setFocusPolicy(Qt::NoFocus);
I am trying to replicate a green square image in pure css3. You can see the image here:
So far I have managed to generate the square, looking just like the one in the image. The problem is the border of the circle in the square. As you can see, the border of that circle in the image is gradient and mine is not (see fiddle) and I have no idea how to replicate this in CSS...
Here is my fiddle of the square
The CSS code I am currently using:
.greenBlock, .greenCore {
background-color: #00c200;
border: 3px solid;
border-top-color: #00de00;
border-right-color: #006900;
border-bottom-color: #006900;
border-left-color: #00de00;
z-index: 10;
width: 42px;
height: 42px;
}
.greenCore {
width: 22px;
height: 22px;
border-radius: 50%;
-webkit-transform: translate(25%, 25%);
transform: translate(25%, 25%);
}
How can I do this gradient circle border in CSS3?
Thanks a lot
I would use a pseudo-element (:before) and style it with a gradient background.
(that is because border-image cannot be combined with border-radius)
.greenBlock {
background-color: #00c200;
border: 3px solid;
border-top-color: #00de00;
border-right-color: #006900;
border-bottom-color: #006900;
border-left-color: #00de00;
width: 42px;
height: 42px;
position:relative;
z-index:10;
}
.greenCore {
background-color: #00c200;
width: 22px;
height: 22px;
border-radius: 50%;
top:50%;
left:50%;
margin-left:-11px; /*half width*/
margin-top:-11px;
position:relative;
}
.greenCore:before{
content:'';
position:absolute;
z-index:-1;
border-radius:50%;
width:28px; /*22 of greenCore + 3 + 3 for the borders*/
height:28px;
left:-3px;
top:-3px;
background: -moz-linear-gradient(-45deg, #00ff00 0%, #004900 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(100%,#004900));
background: -webkit-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -o-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: -ms-linear-gradient(-45deg, #00ff00 0%,#004900 100%);
background: linear-gradient(135deg, #00ff00 0%,#004900 100%);
}
<div class="palette greenBlock" data-code="2">
<div class="greenCore"></div>
</div>
One possibility is to make a slightly larger circle with a diagonal gradient background, and place it behind the "core"-circle. This way the larger circle will appear to be a border to the second circle. By modifying your fiddle, I got something like this.
In order to make the gradient I used the linear-gradient function, and assigned it as the background:
background: linear-gradient(135deg, #00de00, #006900);
The first value is the direction of the gradient in degrees. The second two values is the start and end color of the gradient.
Perhaps you can try adding this:
box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-moz-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
-webkit-box-shadow:1px 1px 3px 1px #000, -1px -1px 1px #fff;
To your .greenCore class. This may be close. You may want to play with the values to get it closer to your liking.
I have the following stylesheet:
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #2A2A2A, stop: 0.4 #E1E1E1,
stop: 0.5 #E1E1E1, stop: 1.0 #2A2A2A);
background-image: url(:/metal_toolbar);
border-left: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
border-bottom: 1px solid #9B9B9B;
border-top-color: #5A5A5A;
font: bold 12pt;
/*min-width: 20ex;
max-width: 1000ex;*/
padding: 2px;
}
If I don't declare the font in the style sheet, my tabs are sized appropriately for the text they contain, however when I increase the font size, the tab size remains constant and the text gets cut-off. I've tried all the width settings but I want the tab width to scale to what it contains.
Anyone know a work-around or fix for this?
I'm loading the style sheet file into my program as a skin, so I'd prefer stylesheet solutions over programmatic solutions if they exist
EDIT:
Here's the working version with proper tab sizes
QTabBar
{
font: bold 9pt;
}
QTabBar::tab
{
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #2A2A2A, stop: 0.4 #E1E1E1,
stop: 0.5 #E1E1E1, stop: 1.0 #2A2A2A);
background-image: url(:/metal_toolbar);
border-left: 1px solid #9B9B9B;
border-right: 1px solid #9B9B9B;
border-bottom: 1px solid #9B9B9B;
border-top-color: #5A5A5A;
min-width: 20ex;
padding: 2px;
}
Set the font from the QTabBar then. Rough pseudocode below.
font = tabbar.font()
font.setPointSize(12)
font.setBold(true)
tabbar.setFont(font)
You should be able to access the QTabBar from the QTabWidget, and just set your style sheet without the font. I hope this can help.
I currently have a QToolBar that has the following style sheet
QToolBox::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border-radius: 3px;
color: darkgray;
width: 70px;
}
QToolButton { /* all types of tool button */
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
padding-right: 30px; /* make way for the popup button */
}
QToolButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 30px;
}
Now the problem with the above style sheet is that the QToolButton tag applies to every toolbutton that I add to the QtoolBar. Is there anyway to restrict the application of tis design to certain QToolButton that I add dynamically. The stylesheet is added at design time to the QToolBar ?
You could use the objectName of the instancied QToolButton. In a QStyleSheet you can target specific instances of QtWidget inherited classes with #ObjectName.
exemple in sources :
QWidget *pWidget = new QWidget(parent);
pWidget->setObjectName("myWidget");
example in qss :
QWidget {
background-color: red;
}
#myWidget {
background-color: green;
}
for your widget with object name set as "myWidget", the background will be green, for all the others it will be red.
You will eventually need to polish() your widget if you dynamically update your stylesheet too. for this look at Qt doc : polish()