If you go to this website you see that when you scroll down the following style is added through javascript for the top navigation div (#yucsHead):
-webkit-box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
-moz-box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
box-shadow: 0 0 9px 0 rgba(73,15,118,1)!important;
border-bottom: 1px solid #490f76!important;
I'm a bit new to CSS3 and noticed that CSS now has many features that you first could only do in Javascript. I was therefore wondering whether this is possible through CSS3 as well. I prefer to do things through css where possible.
For finding how much the document has been scrolled we use scrollTop() in jquery, and based on that styles are applied.Your example site does that...I dont think there is a pure CSS 3 solution for this..
Related
We are using different static images as per year to display.
I want to make it dynamic by adding image without number and adding number. Its looks good except. I tried text-shadow css property but does not give same result like image.
Is it possible to add shadow by css which goes to end of left corner?
You probably have to use multiples text-shadow to achieve this style.
text-shadow: 1px 1px 0 #087194, 2px 2px 0 #087194, 3px 3px 0 #087194, 4px 4px 0 #087194, 5px 5px 0 #087194;
https://jsfiddle.net/h462ruey/33/
I'd like to create a customized Lumo theme in Vaadin 14.6, where the buttons (<vaadin-button>) show a double border (css: box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--some-custom-background-color);) when focussed.
While custom styles for other <vaadin-button> pseudo selectors, such as :hover, :active, etc. work well, I cannot find a way to customize the :focus appearance.
Focus styles need to be customized using the focused and focus-ring state attributes, which are applied on the host element.
The focused attribute is applied the button is focused either with a mouse/pointer or keyboard, while focus-ring is only applied when it’s focused with the keyboard (corresponds to the native :focus-visible pseudo class).
:host([focused]) {
...
}
:host([focus-ring]) {
...
}
I found that it is actually Firefox which is not showing the :focus related css. Chrome and Safari display the style as desired.
For the sake of completeness, this is the related css, which goes into 'vaadin-button.css' in the 'themes/components' folder of the application:
:host([theme~="primary"]:focus) {
height: calc(var(--my-button-size) - 6px);
border-radius: 1px;
background-color: var(--my-button-primary-background-color-focus);
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--my-button-primary-background-color);
}
I am working with smartgwt and css. I have different blocks. when a block is focused I change the style name of the block and blur the other blocks.
Everything works correctly except that sometimes when I change block focus two blocks become active (highlighted). It's weird because when I verify the css class through the inspector the inactive block has not the "active" class.
It means that the css style has not rendered correctly. Is that a common problem? Is there a possibility to refresh the rendering of an html element after updating its class name?
.windowFocused {
background-color: #fafafa;
border-color: #50A9CC !important;
-moz-box-shadow: inset 2px 0 0 0 #50A9CC;
-webkit-box-shadow: inset 2px 0 0 0 #50A9CC;
box-shadow: inset 2px 0 0 0 #50A9CC;
}
I add this class when focused and remove it on blur. When I check the page through the inspector it is correctly removed but it keeps the style.
I know this could be a silly question. I have been trying to remove the shadow which comes after clicking any button in ThemeRoller for a while. There is no option given in the data theme roller to change the color or remove it.
Can anyone help me with that.
Thanks
Edit 1
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
Well you could try the following styles:
button:active{
box-shadow: none !important;
}
If the issue isnt related to box-shadow, try outline.
Okay after dwelling into the css this is what worked for me
/* Focus buttons and text inputs with div wrap */
.ui-page-theme-c .ui-focus,
html .ui-bar-c .ui-focus,
html .ui-body-c .ui-focus,
html body .ui-group-theme-c .ui-focus,
html head + body .ui-btn-c.ui-focus,
html head + body .ui-body-c.ui-focus {
-webkit-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
-moz-box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
box-shadow: 0 0 0px #3388cc /*{c-active-background-color}*/;
}
made the shadow to 0px instead of default 12px.
Note: you have to do it in the respective theme like mine was data-theme-c
Thanks to the people who shared there answers
Below code is not working in IE..
input:focus,textarea:focus,select:focus
{
border:1px solid #fafafa;
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff;
}
Instead it is not showing textbox border even.
Here is the fiddle link
http://jsfiddle.net/3cKVp/1/
It will not work in IE 7 or earlier, as you can see on this page which shows you a compatibility levels for specific browsers.
:focus pseudoselector and box-shadow CSS property is not supported in IE7. To support focus style changes you will have to bind to focus and blur events in javascript (possibly using jQuery) and add/remove respectively a CSS style that will indicate a "focused" appearance.