Develop Reference

Text cutout effect with an image on a div that has written text. CSS

I am making a clock application that shows digital time. The problem is that I would like to add a cutout effect to that digital time where there is an image added that makes the digital time visible.
The thing is that, the in order for the time to be displayed(as in visible), they(digital time numbers that change in relative to time) have to be on a higher z-index scale from the rest of the stuff. I can not make the numbers visible so, they would have that cutout effect or a knockout effect as many call it. The numbers are layered as a z-index: 9; as they are the highest layer in that application, as there is content beneath the digital time.
The digital time has to look like it has a cutout effect. I can make the cutout effect with a still image that has a still text or numbers, but can not make the effect look like a cutout effect in my own project added to that digital time.
Basically, the digital time has a z-index: 9; and there is a white image beneath the time that has a z-index: 8; . The thing is that, I can not make a cut out effect so that everything would be as it is, as in the content on the screen has to remain the same. The digital time has to have a cutout effect with an image that can be changed, but at the same time the digital time div has to be the highest layered z-index while the content has to remain the same.
I can change to color of the digital time easily, by writing color: green; into css, but can not make a cutout effect with an image. Is it possible somehow to add an image to numbers that change, while the image is only visible in the area the numbers are?
A webpage that describes using image as a cutout effect:
https://www.w3schools.com/howto/howto_css_cutout_text.asp
The content on the webpage is not the one that I need. The need is for the same text, but applied to constantly changing numbers, while at the same time the numbers, or in this case the text, is the way it is on the webpage. Only imagine, that between the white canvas(where the cutout effect was implemented) and the image is another layer that is, for instance, red. That red layer must not have any effects, just a red canvas, but the text has to have that effect.
Does someone know how to solve this kind of issue regarding to css?
Thanks

You could do it with Javascript, for example:
var el = document.getElementById("textYouWantToChange");
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
window.setInterval(function() {
var now = new Date();
var time = pad(now.getHours(), 2) + ":" + pad(now.getMinutes(),2) + ":" + pad(now.getSeconds(),2);
el.innerHTML = time;
}, 1000);
.image-container {
background-image: url("https://www.w3schools.com/howto/img_nature.jpg"); /* The image used - important! */
background-size: cover;
position: relative; /* Needed to position the cutout text in the middle of the image */
height: 300px; /* Some height */
}
.text {
background-color: white;
color: black;
font-size: 10vw; /* Responsive font size */
font-weight: bold;
margin: 0 auto; /* Center the text container */
padding: 10px;
width: 50%;
text-align: center; /* Center text */
position: absolute; /* Position text */
top: 50%; /* Position text in the middle */
left: 50%; /* Position text in the middle */
transform: translate(-50%, -50%); /* Position text in the middle */
mix-blend-mode: screen; /* This makes the cutout text possible */
}
<div class="image-container">
<div id="textYouWantToChange" class="text">NATURE</div>
</div>

Found this pen which is better than the current option. It uses masking rather than a cutout approach.
https://codepen.io/nopr/pen/Jdsbx
CSS:
/* Housekeeping */
body {
background: #FF0000;
text-align: center;
padding: 50px 0;
}
/* Reverse Mask */
.mask {
cursor: pointer;
display: inline-block;
overflow: hidden;
/* Background to mask */
background: url("");
background-position: 0 50%;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
/* Text size and style */
font-size: 150px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 1;
letter-spacing: -10px;
padding: 0 15px;
}
/* Variants */
.one {
color: transparent;
text-stroke: 25px;
background-position: 0 25%;
text-shadow: 0 0 15px rgba(221,221,221,0.2);
transition: text-shadow 0.35s linear;
}
.one:hover {
text-shadow: 0 0 10px rgba(221,221,221,1), 0 0 0 #ddd;
}
.two {
color: transparent;
text-stroke: 5px;
background-position: 0 0;
transition: background-position 1.5s;
}
.two:hover {
background-position: 0 50%;
}
.three {
color: transparent;
text-shadow: 0 0 0px #ddd;
text-stroke: 5px;
transition: text-shadow 0.5s;
}
.three:hover {
text-shadow: 0 0 5px rgba(255,255,255,0.0);
}
HTML:
<h1 class="mask one">Stockholm</h1>
<h1 class="mask two">Stockholm</h1>
<h1 class="mask three">Stockholm</h1>
Unfortunately I could not apply that to the clock. The clock turns to grey instead of giving an error in the console.

Enforce key size on virtual keyboard

This is the layout I am trying to achieve: https://jsfiddle.net/h0oa3Lps/ All keys are the same size.
In my application I have this code. The js is at the bottom of my jade file:
$('.keyboard')
.keyboard({
layout: 'custom',
customLayout: {
'default' : [
'1 2 3 {c}',
'4 5 6 {b}',
'7 8 9 {dec}',
'{left} {right} 0 {a}'
]
},
maxLength : 6,
restrictInput : true,
useCombos : false,
acceptValid : true,
validate : function(keyboard, value, isClosing){
// only make valid if input is between 0 and 100 inclusive
return value >= 0.0 && value <= 100.0;
}
})
.addTyping();
When using css/keyboard.min.css, the left arrow, right arrow and backspace keys are slightly larger than the other keys. Also the text positioning is off. Image:
If I switch to css/keyboard-basic.min.css the arrow keys are the same size as regular keys but the esc, backspace, and accept keys are twice the size as the regular keys. Also this takes up half of the screen (since it's not using the jquery-ui positioning). Image:
How do I enforce uniform key size?
If it makes any difference I am using Node, Express and Foundation v5.5.3 plus I have just updated to the latest versions of jQuery, jQuery-ui and jQuery.keyboard.

To fix this issue I copied the unminified css of keyboard.css to a keyboard-butchered.css. I then started experimenting with the styles in keyboard-basic.css and eventually came up with the following that partially answered my question:
.ui-keyboard {
/* adjust overall keyboard size using "font-size" */
font-size: 28px; /* increase button size for small screen */
text-align: center;
background: #fefefe;
border: 1px solid #aaa;
padding: 4px;
/* include the following setting to place the
keyboard at the bottom of the browser window */
left: 0px;
top: auto;
/*position: fixed;*/
position: absolute;
white-space: nowrap;
overflow-x: auto;
/* see issue #484 */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
I then mixed in the style for the keyboard button. This gives the correct style as seen in the jsfiddle demo (but jumbo sized).
.ui-keyboard-button {
border: 1px solid #aaa;
padding: 0 0.5em;
margin: 1px;
min-width: 3em;
height: 3em;
line-height: 3em;
vertical-align: top;
font-family: Helvetica, Arial, sans-serif;
color: #333;
text-align: center;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
background: white;
background-image: -webkit-linear-gradient(-90deg, white 0%, #e3e3e3 100%);
background-image: linear-gradient(-90deg, white 0%, #e3e3e3 100%);
cursor: pointer;
overflow: hidden;
-moz-user-focus: ignore;
}

How to make a Ruler scale in HTML of an overall fixed size but which can be divided into required no. of sections by taking user input

I am making a Ruler scale using html, css, js, whose length is supposed to be fixed always. On clicking the scale, between any two bars, a prompt will be generated and the user will then input a number which signifies the no. of sections by which the scale length (between any two bars) will be divided in equal parts and get displayed on it.
e.g. if initially the scale is |_____|_____|_____| , then on clicking 2nd bar and entering divide by 2, the scale should look like|_____|__|__|_____|
I referred to the following link for making the ruler:
How to make a ruler scale in HTML and CSS
But in the answer given in the above link, the user has to manually change the value of the "data-items" attribute, to make different no. of sections every different time, and also, on changing its value, the overall size of the scale also increases, which contradicts my case.
This is what I have coded so far and I really don't know how to split any bar on user input without changing the overall length.
https://jsfiddle.net/yoshi2095/pvjhLggz/9/
HTML:
<div>
<ul class="ruler" data-items="10"></ul>
</div>
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
JS:
function inputNumber() {
var inputNum = prompt("Divide by");
$("a").attr("data-items",inputNum);
}
$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
var ruler = $(this).empty(),
len = Number(ruler.attr("data-items")) || 0,
item = $(document.createElement("li")),
i;
for (i = 0; i < len; i++) {
ruler.append(item.clone().text(i + 1));
}
});
});
Any help would be greatly appreciated. Thanks.

Fyneworks jQuery Star Rating Plugin - half ratings

I am trying to implement a star rating system for articles and found this nice plugin. I have exchanged the default star.gif with my own stars. Everything works fine if I use a full star rating. As soon as I am trying to use the split star function, the stars are not displayed correctly anymore.
The stars itself have a width of 32px.
The half stars should be on top of the right side of the full stars.
The following if-clause seems to be responsible for calculating the position:
// Prepare division control
if(typeof control.split=='number' && control.split>0){
var stw = ($.fn.width ? star.width() : 0) || control.starWidth;
var spi = (control.count % control.split), spw = Math.floor(stw/control.split);
star
// restrict star's width and hide overflow (already in CSS)
.width(spw)
// move the star left by using a negative margin
// this is work-around to IE's stupid box model (position:relative doesn't work)
.find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' })
};
it is embedded in a "for-each star" loop. I have debugged this with firebug and the calculation seems to be correct. Each second star should have a left-margin of -16px.
For some reason this is not displayed on the site though.
Does anyone know what I am doing wrong? I have to mention that I do not have much experience with JS.
Here is the css:
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
float: left;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 17px;
}
div.rating-cancel, div.rating-cancel a {
background: url("delete.gif") no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
}
div.star-rating, div.star-rating a {
background: url("star.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
div.rating-cancel a, div.star-rating a {
background-position: 0 0;
border: 0 none;
display: block;
height: 100%;
width: 32px;
}
div.star-rating-on a {
background-position: 0 -32px !important;
}
div.star-rating-hover a {
background-position: 0 -64px;
}
div.star-rating-readonly a {
cursor: default !important;
}
div.star-rating {
background: none repeat scroll 0 0 transparent !important;
overflow: hidden !important;
}

I cannot really tell what went wrong here. First of all the width in this setting had to be adjusted. Then one might want to get rid of the float option and use inline-block on the display instead. That way the following components will be drawn in a new line.
div.rating-cancel, div.star-rating {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: inline-block;
height: 32px;
overflow: hidden;
text-indent: -999em;
width: 32px;
}
If I changed this value with firebug nothing happened. I replaced the css with the original file and then just added the changes I needed again and voilá, everything looks nice now.

CSS triangle side with round on left? PART 2

This is what it should look like:
(source: kerrydeaf.com)
span.trig_italic2{color:#000000; line-height:17px;font-size:12px;font-family:opensansitalic;
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;}
span.trig_italic2:before
{
content:"";
display:block;
position: absolute;
right: -22.5px;
top:0;
width: 0;
height: 0;
border: 11px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
Here is a jsfiddle:
http://jsfiddle.net/alma/zQKhb/2/
The problem is its hard to have rectangular box with corners to align the triangle as above?
It is for iphone app using Hybrid coding.
UPDATE: #andyb. Thank you for the update and this is what I see as below:
(source: kerrydeaf.com)
UPDATE: #andyb. It is now solved and a screen shot from iOS 6 stimulator.
(source: kerrydeaf.com)
UPDATE: Question: How do I move a yellow box down and touch the box a light blue box without leaving a gap?
(source: kerrydeaf.com)
UPDATE: Answer: It is now solved: added this margin-bottom:-8.5px on span.trig_italic2 CSS and it worked. (Image is not included)

Instead of creating a yellow triangle, how about creating a white triangle to chop off the end?
This does rely on making the <span> a bit wider, since the end will be taken up with the white triangle. So the span can be given display:inline-block in order for the width to take affect. I also had to give the height a smaller value and make the line-height equal to the font-size to keep the text vertically aligned in the middle of the block.
Edit: Since the background is a non-solid colour, an alternate approach would be to use a linear-gradient to chop off the end. The (slight) drawback to this approach is that the start of the chopping off point is hard-coded in the CSS and will not adapt to variable width content.
Updated demo (Webkit only)
span.trig_italic2 {
color:#000000;
line-height:12px;
font-size:12px;
font-family:opensansitalic;
width:136px;
display:inline-block;
height: 12px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;
background:-webkit-linear-gradient(45deg, #FFCC05 100px, transparent 100px);
}
The original answer which works with solid colour backgrounds is left below.
Original demo (Webkit only)
span.trig_italic2 {
color:#000000;
line-height:12px;
font-size:12px;
font-family:opensansitalic;
width:136px;
display:inline-block;
height:12px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;
}
span.trig_italic2:after {
content:"";
display:block;
position: absolute;
right:0;
top:0;
width:0;
border:12px solid transparent;
border-color:#fff #fff transparent transparent;
}
​

The problem is in padding that increases box size unless you set box-sizing to border-box.
I would do this: http://jsfiddle.net/zQKhb/9/