First question on Stackoverflow but I've used it constantly while learning how to make websites and a bunch of other stuff. I've been using Bootstrap to create a website with a friend and in the past we've both seen websites with really beautiful navbars.
What we're wondering is if we can utilise Bootstrap's navbars and add some additional code to add a sort of under-glow to the buttons! In an ideal world too, this glow would move from button to button following the cursor and reset to the currently active page button if none are hovered over. I'm hoping you've seen something like this before but it's actually difficult for me to find an example of this now.
I've been looking at using this sort of effect but turned upside down
body { margin: 30px; }
hr {
border: none;
border-top: 1px solid #eee;
height: 5px;
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
}
<hr>
(Source: http://jsfiddle.net/sonic1980/65Hfc/; (provided by another amazing stackoverflow user))
Is this possible? Thanks for any help, let me know if I can provide any further information.
I tried to replicate it with a box shadow, check it out:
.btn{
box-shadow: 0px 5px 5px #888888;
}
http://jsfiddle.net/gumxt15q/
Using inset
http://jsfiddle.net/q0ere00q/
Related
This is the CSS code I use:
a {
text-decoration: underline dashed;
}
And you can see here that it is displayed differently on different browsers:
On Mozilla:
On Brave:
On Chrome:
How can I make the look consistent?
There are many ways of underlining text without using text-decoration: underline. One way of doing this is with bottom borders.
First make a CSS class for all the text you want to have underlines. Something like this should do:
.dashed_underline {
border-bottom: 3px black dashed;
}
Then apply this class to your intended paragraph element:
<p class="dashed_underline">This text has a dashed underline</p>
You should find that the underline now looks the same across web browsers.
Well since every browser has it's own unique way of displaying HTML and CSS you can use something like this
.dash.underline {
text-decoration: none;
background-image: linear-gradient(to right, #000 75%, transparent 75%);
background-position: 0 1.04em;
background-repeat: repeat-x;
background-size: 8px 3px;
}
<p class="dash underline">See it works!</p>
You can read Why does your text decoration or any other stuff looks different from browsers to browsers here at webfx.com
You can also checkout Underline.js they are doing some pretty good job just for underlines and stuff. Underline.js GitHub
You can use the code below
a
{
text-decoration-thickness: 2px;
}
I decided to use markdown with flexdashboard package for generating a dynamic dashboard.
The dashboard is well designed out of the box thanks to the people who wrote it , BUT I would like to set a sidebar to the right side of the screen (not to the left as given by default).
I have read the documentation flexdashboard's sidebar and googled quite a lot but couldn't find a way how to customize it from the markdown file (Rmd).
Eventually decided to modify bunch of CSS files, and move those html elements.
.section.sidebar {
top: 61px;
border-bottom: 10px solid #ececec;
border-left: 10px solid #ececec;
background-color: rgba(255, 255, 255, 1);
left:1080px;
}
but it seems I have taken the wrong path (CSS tweaking is a headache for me), Can someone suggest a better approach cause I'm kinda lost here?
for demonstration purposes I drew a small sketch:
my illustration
Thank you in advance,
Gil
You have to add this CSS code to parent class:
.container {
justify-content: flex-end;
}
I have the following 3 screenshots of which the first 2 are from Chrome and the last one is from IE10. I've built the interface for a Query Builder. The first image shows the default view and on clicking the + button the view changes as shown in the second image.
Following is the CSS which I got for the border around the section.
.container_border {
border: 2px solid rgb(148, 178, 73);
border-radius: 20px;
border-top: none;
margin: 0 -1px -1px;
padding-bottom: 10px;
padding-top: 20px;
}
When I tried the same thing in IE10, the border did not expand automatically and I'm not sure why.
Note: I'm not so fluent with CSS and I make use of Bootstrap for views. This is the first time I'm testing with IE, any best practices recommendations will be appreciated.
I am attempting to skin a Kendo UI DropDownList widget for my own site, and have had fairly good success with a small caveat that is driving me nuts.
I am including a link to a jsBin that demonstrates the issue, and some screenshots. But basically what is happening is that I want the entire dropdown list to be flat (no border radius), and then to be very solid (white background, black text) and the currently selected item to have a thick red bar as its left border (3px in my example), and then as you hover over the items in the list box, their left border becomes a thick greenish/blue bar.
This is working, except for some strange spacing issues; First of all, as I hover over things, they "jump" around. They get pushed this way and that a bit obnoxiously, making it feel non-uniform. I really want to fix that; and the thing that is driving me the most nuts is that the "bar" that I use on the left-border is having a strange curvature to it, making it look very out of place, as if it is almost beveled. Can anyone assist with this?
jsBin Example
.custom-dropdown .k-item {
background: white;
font-weight: lighter;
padding: 0 4px;
border-left: solid 2px white; // add this
}
.custom-dropdown .k-item.k-state-selected,
.custom-dropdown .k-item.k-state-focused {
color: black; // and add this
border: solid 1px white;
border-left: solid 3px #b91d47;
}
I think there nothing to do for strange curvature.
http://www.w3schools.com/css/css_border.asp
http://jsbin.com/elOSuDo/1/edit updated jsbin
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons