I have copied the styling from this Codepen demo: https://codepen.io/CSWApps/pen/MmpBjV into my own code like so:
<style>
body {
background-color: #5c4084;
text-align: center;
padding: 50px;
}
.container {
padding: 40px 80px;
background-color: #fff;
border-radius: 8px;
}
.heading {
h1 {
background: -webkit-linear-gradient(#fff, #999);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-align: center;
margin: 0 0 5px 0;
font-weight: 900;
font-size: 4rem;
color: #fff;
}
h4 {
color: lighten(#5c3d86,30%);
text-align: center;
margin: 0 0 35px 0;
font-weight: 400;
font-size: 24px;
}
}
</style>
However, beginning with H1 my IDE highlights the line background: -webkit-linear-gradient(#fff, #999); with the error message "semi-colon expected." I can confirm that no linear gradient is being added.
If you click on settings then CSS, you can see that some older versions of Bootstrap are in use.
Note: I would recommend a newer version of Bootstrap, or better yet, Bootstrap-Vue
Related
Please refer to the image below:
Is it possible to implement text shadow CSS property such that only the outer periphery (stroke) of the text shadow is visible.
Use a pseudo element and style it with shadows:
:root {
--body: #FFF;
--outline: #666;
--background: #000;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
main {
min-height: 100vh;
background: var(--background);
color: var(--body);
display: grid;
place-items: center;
position: relative;
z-index: 1;
}
.outline-effect {
font-size: 4rem;
position: relative;
font-weight: 900;
}
.outline-effect::before {
font-size: 150%;
content: attr(data-outline);
position: absolute;
top: -0.333em;
left: 1em;
color: var(--background);
text-shadow: 1px 0 0 var(--outline), 0 1px 0 var(--outline), -1px 0 0 var(--outline), 0 -1px 0 var(--outline);
z-index: -1;
font-weight: 200;
}
<main>
<p class="outline-effect" data-outline="Build">Build.</p>
</main>
You can put multiple shadows that will hide each other. Play with this to get what you desired.
Snippet:
body {background-color: black;}
.demo {
margin-top: 30px;
color: white;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow:
24px -17px 0 black, /* same as background color */
25px -16px 0 white,
23px -18px 0 white,
23px -15px 0 white;
}
<div class="demo">demo</div>
Create four shadows each slightly off (↖ ↗ ↘ ↙) by 1 px, and all that behind the main shadow (white in this case):
<html>
<head>
<style>
div {
font-family: 'Arial Black', sans-serif;
font-size: 100px;
text-shadow:
20px -20px 0 white,
19px -19px 0 red,
19px -21px 0 red,
21px -21px 0 red,
21px -19px 0 red;
}
</style>
</head>
<body>
<div>Build.</div>
</body>
</html>
I think its not possible to achieve this exact effect using text-shadow, since the text at back is larger than the solid text. If you need to stick with text-shadow only, then check #Daniel Sixl's answer.
You can achieve this effect using a ::before selector and webkit-text-stroke. Be sure to match the value of data-text attribute, with the text that is inside the h1.
body{
background: #000;
/* Center Text on Screen */
display: grid;
place-items:center;
height: 100vh;
}
h1{
color: white;
font-size: 5rem;
transform: translateX(-50%);
font-family: sans-serif;
}
h1::before{
content: attr(data-text);
position: relative;
top: -0.15em;
right: -88.75%;
font-size: 1.6em;
-webkit-text-stroke: 2px grey;
-webkit-text-fill-color: transparent;
z-index: -1;
}
<h1 data-text="Build.">Build.</h1>
Twitter Bootstrap is ment to easily build on top of it. Now I'm experience a problem which I can not solve. I work with TB v. 2.3.2.
In my own style.less file, I included TB:
#import "../bootstrap/less/bootstrap.less";
In the original TB files, forms.less, this LESS can be found:
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: #baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.add-on {
display: inline-block;
width: auto;
height: #baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: #baseFontSize;
font-weight: normal;
line-height: #baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 #white;
background-color: #grayLighter;
border: 1px solid #ccc;
}
}
So in my own stylesheet after after the #import of the bootstrap files, I trie to change the background-color for .add-on like this (should become pink instead of #grayLighter you find in the above code):
.input-append,
.input-prepend {
.add-on {
color: blue;
background-color: pink;
}
}
Now, the color I have added (blue) is working! This is not overwriting a value, because the .add-on in forms.less did not had any color specified. But as you can see it does have a background-color (#grayLighter), which I want to change! You see that I have specified this to be pink, but it doesn't work. I don't understand this. Can somebody help me out?
I use these Less further down in my stylesheet like this:
div {
.input-prepend;
.form-search .input-prepend;
label {
.input-prepend > .add-on;
}
}
As you can see in below image, the pink background color is not working.
I checked how the output from the LESS in CSS looks, and have written my questions in there as well. The further I'm digging in to this the more I don't understand it, a codepen example DOES SHOW PINK as background, how it should be in my opinion, see working example here: http://codepen.io/willemsiebe/pen/kvmic.
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // FIRST MENTION BG COLOR IN FORMS.LESS
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink; // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}
// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?
#woocommerce_product_search-3 #searchform div label {
color: blue;
background-color: pink; // WHY IS THIS SHOWING UP FIRST?
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // WHY IS THIS SHOWING UP LAST?
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
margin-bottom: 0;
}
20-7-2014: Ok, now I'm really confused! Instead of overwriting it in my own style.less directly, I put the same code in a different less file and imported it with #import, and now its working... but the output in CSS is exactly the same, except from the fact that the background color PINK is now mentioned last!
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink;
}
#woocommerce_product_search-3 #searchform div label {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
color: blue;
background-color: pink; // NOW IT'S MENTIONED LAST!
margin-bottom: 0;
}
Twitter Bootstrap is ment to easily build on top of it.
That's only true for mixins, see also: Bootstrap 3 with LESS: how to handle bootstrap's nested rules?
In stead on mixins (which only work for simple classes) you could try to use the :extend() psuedo class, see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin
To style your HTML:
<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>
Try the following Less code:
#import "bootstrap.less";
#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}
}
Been messing with it for the past couple of hours. Trying to get a vertical space betweeb tags, but no luck...
Blog has a separate template file.
Live link here
http://soloveich.com/pr6/blog/
Html code
<div id="tagy">
widget code
</div>
css
#tagy {
margin-top: 20px !important;
}
#one h2 {
text-align: center;
width: 100%;
padding-top: 45px;
padding-bottom: 10px;
font-family: 'Raleway', sans-serif;
font-size: 26px !important;
color: #7e7e7e;
border-bottom-style: dotted;
border-bottom-color: #a6a6a6;
border-bottom-width: 1px;
}
.seo-tag-cloud a {
margin: 10px;
padding: 7px;
background-color: #dddddd;
color: #666666;
font-size: 14px !important;
text-align: center;
}
Add display: inline-block to your .seo-tag-cloud a styling. Anchors are inline by default, which means they don't have margin.
I am currently working with a customized jquery alert from this SITE. I am trying to achieve a gray transparent background when the alert appears but have been unsucessful. How can I get a gray transparent screen that covers the whole background behind the alertbox? Here is my EXAMPLE
CSS
<style>
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(images/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url(images/info.gif);
}
#popup_content.confirm {
background-image: url(images/important.gif);
}
#popup_content.prompt {
background-image: url(images/help.gif);
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
</style>
You need something like in this fiddle
The 'alertblanket' has an high z-index and overlays the entire page. Your dialog then must have a higher z-index to be on top of the 'alertblanket'
EDIT: You can set the color of that alert library simply by setting
$.alerts.overlayiOpacity = 0.5
$.alerts.overlayColor = '#AAA'
Or anything you like. See also the comments inside the .js file of jquery.alerts.js
I'm new to css, I have a top nav but I couldn't set its width. It seems different when I test with Dreamweaver, ie9, ie6, Firefox and Opera. Here's my code:
#charset "utf-8";
/* CSS Document */
html {
background: url(images/light-tile.gif) repeat;
}
body {
overflow: auto;
width: 54.35em;
margin: 0 auto;
background-color: #fff;
padding-left: 0.25em;
padding-right: 0.4em;
border: 0.07em solid #97b4e0;
overflow: visible;
}
#main {
background-color: #fff;
}
ul#top-nav {
list-style: none;
margin: .9em .9em .9em 0;
padding: 0;
width: 110%;
}
ul#top-nav li {
display: inline;
}
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
ul#top-nav li a:hover {
color: #000;
font-weight: bolder;
background: #D7EBFF;
border-bottom: 0.2em solid #e9e9e9;
}
...
<body>
<div id="main">
<div id="top-info">Kumcuğaz Köyü İlköğretim Okulu</div>
<img id="top-image" src="../images/top_image.png" alt="üst resim" width="869" height="159" />
<ul id="top-nav">
<li>ANASAYFA</li>
<li>GALERİ</li>
<li>PERSONEL</li>
<li>İLETİŞİM</li>
<li>ZİYARETÇİ DEFTERİ</li>
</ul>
<div class="clear"></div>
<div id="faux">
...
If it isn't possible it to view same on all browsers, I'll have to use a table. Thanks for helping.
Sincerely
What's the reason for making it 110% wide? That's wider than the window. Also, you have 5 menu items each set to 18.5% wide... that adds up to only 90.5% total.
What happens when you make it 100% wide and each of the 5 items is 20% wide?
http://jsfiddle.net/u78Ks/2/
It looks like this might be the issue
width: 18.5%; /* for 5 items */
in here
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
Browsers could be interpreting this differently based on the font sizes, window sizes, etc.
Try setting this to a static width in pixels.