<input class="checkbox" type="checkbox">
<div class="box">
<h1>Hello World!</h1>
</div>
.checkbox {
display: block;
height: 2em;
margin: 1em;
width: 2em;
}
@max: 1280px;
@mid: 960px;
@min: 640px;
.checkbox:checked + .box {
h1 {
@offset-top-max: 32px;
@offset-top-min: 8px;
@offset-h-max: 240px;
@offset-h-min: 8px;
.fluid-prop(margin-left, @offset-h-min, @min, @offset-h-max, @max);
.fluid-prop(margin-right, @offset-h-min, @min, @offset-h-max, @max);
.fluid-prop(margin-top, @offset-top-min, @min, @offset-top-max, @max);
display: inline-block;
margin: @offset-top-max @offset-h-max 0;
position: relative;
&:after {
@height: 82px;
.fluid-prop(height, 0, @mid, @height, @max);
bottom: 0;
color: deepskyblue;
content: 'Hello World!';
height: @height;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
@media (max-width: @mid) {
height: 0;
}
}
@media (max-width: @min) {
margin: @offset-top-min @offset-h-min 0;
}
}
}
.fluid-prop(@prop, @p-min, @w-min, @p-max, @w-max) {
@p-k: unit((@p-max - @p-min)/(@w-max - @w-min));
@p-b: @p-min - @p-k * @w-min;
@media (min-width: @w-min) and (max-width: @w-max) {
@{prop}: ~'calc(@{p-k} * 100vw + @{p-b})';
}
}
h1 {
@fz-max: 72px;
@fz-mid: 48px;
@fz-min: 32px;
.fluid-prop(font-size, @fz-min, @min, @fz-mid, @mid);
.fluid-prop(font-size, @fz-mid, @mid, @fz-max, @max);
font-size: @fz-max;
@media (max-width: @min) {
font-size: @fz-min;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.