Колесо интерактивной графики HTML
Как сделать интерактивную анимацию при наведении курсора, как на изображении ниже для сайта?
Я могу сделать простой CSS-наведение и изменить его размер, если это плоские квадратные изображения, но я действительно озадачен тем, как это сделать в форме колеса, как на изображении ниже.
Привет, у меня еще нет кода, поэтому я спрашиваю. Это просто AI / PSD-воспроизведение того, что я пытаюсь сделать.
—
22.08.2018 02:38
StackOverflow так не работает ... Мы можем помочь только в том случае, если у вас уже есть код для продолжения, и вы где-то застряли.
—
22.08.2018 08:08
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
3
1 287
1
Ответы 1
Вы можете воспользоваться ссылкой на эту ссылку
<div class = "radial-menu">
<ul class = "radial-menu__menu-list">
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "bold" title = "Bold" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Bold
</h6>
<p class = "radial-menu__menu-content-description">
Make text bold
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "italic" title = "Italic" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Italic
</h6>
<p class = "radial-menu__menu-content-description">
Make text italic
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "underline" title = "Underline" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Underline
</h6>
<p class = "radial-menu__menu-content-description">
Underline text
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "align-left" title = "Align left" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Text Alignment
</h6>
<p class = "radial-menu__menu-content-description">
Set text alignment
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "list-rich" title = "Bulleted List" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Bulleted List
</h6>
<p class = "radial-menu__menu-content-description">
Add a bulleted list
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "list" title = "Numbered List" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Numbered List
</h6>
<p class = "radial-menu__menu-content-description">
Add a numbered list
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "header" title = "Heading" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Heading
</h6>
<p class = "radial-menu__menu-content-description">
Add a heading
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "double-quote-serif-right" title = "Blockquote" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Blockquote
</h6>
<p class = "radial-menu__menu-content-description">
Add a blockquote
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "link-intact" title = "Hyperlink" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Hyperlink
</h6>
<p class = "radial-menu__menu-content-description">
Add a link to something
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "image" title = "Image" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Image
</h6>
<p class = "radial-menu__menu-content-description">
Add an image
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item" style = "display: none;">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "paperclip" title = "Attach File" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Attach File
</h6>
<p class = "radial-menu__menu-content-description">
Attach a file
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item" style = "display: none;">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "code" title = "Code" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Code
</h6>
<p class = "radial-menu__menu-content-description">
Add some HTML
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item" style = "display: none;">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "eyedropper" title = "Font Color" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Font Color
</h6>
<p class = "radial-menu__menu-content-description">
Set font color
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item" style = "display: none;">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "droplet" title = "Highlight Color" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
Highlight Color
</h6>
<p class = "radial-menu__menu-content-description">
Set font color
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
<li class = "radial-menu__menu-item" style = "display: none;">
<div class = "radial-menu__menu-link-bg"></div>
<div class = "radial-menu__menu-icon">
<span class = "oi" data-glyph = "ellipses" title = "More" aria-hidden = "true"></span>
</div>
<div class = "radial-menu__menu-content">
<div class = "radial-menu__menu-content-wrapper">
<h6 class = "radial-menu__menu-content-title">
More
</h6>
<p class = "radial-menu__menu-content-description">
Add more things
</p>
</div>
</div>
<a href = "javascript:void(0);" class = "radial-menu__menu-link"></a>
</li>
</ul>
<div class = "radial-menu__label">
Menu
</div>
</div>
<div class = "menu-items-select">
<label class = "menu-items-select__label" for = "menu-items-to-show">Menu items</label>
<select class = "menu-items-select__select" name = "menu-items-to-show" id = "menu-items-to-show">
<option value = "3">Three</option>
<option value = "4">Four</option>
<option value = "5">Five</option>
<option value = "6">Six</option>
<option value = "7">Seven</option>
<option value = "8">Eight</option>
<option value = "9">Nine</option>
<option value = "10" selected>Ten</option>
<option value = "11">Eleven</option>
<option value = "12">Twelve</option>
<option value = "13">Thirteen</option>
<option value = "14">Fourteen</option>
<option value = "15">Fifteen</option>
</select>
</div>
<div class = "right-click-prompt">
<p class = "right-click-prompt__label">
Right click and drag
</p>
</div>
CSS
//
// BASIC STYLES
//–––––––––––––––––––––––––––––––––––––
*, *:before, *:after {
box-sizing: border-box;
}
html,
body {
font-family: sans-serif;
// font-family: 'Crete Round', sans-serif;
// font-family: 'Volkhov', sans-serif;
height: 100%;
width: 100%;
}
//
// COLOR
//–––––––––––––––––––––––––––––––––––––
$white: #fff;
$black: #000;
$color-primary: #d4dde5;
$color-primary-lighter: lighten($color-primary, 2%);
$color-primary-lightest: lighten($color-primary, 6%);
$color-primary-darker: darken($color-primary, 2%);
$color-primary-darkest: darken($color-primary, 6%);
$color-secondary: #6d9bc5;
$color-secondary-lighter: lighten($color-secondary, 2%);
$color-secondary-lightest: lighten($color-secondary, 6%);
$color-secondary-darker: darken($color-secondary, 2%);
$color-secondary-darkest: darken($color-secondary, 6%);
//
// MENU
//–––––––––––––––––––––––––––––––––––––
$radial-menu-dimensions: 300px;
$radial-menu-bg: $color-primary-darkest;
// $radial-menu-bg: transparent;
$radial-menu-border-width: 0;
$radial-menu-border-color: transparent;
$radial-menu-item-hovered-bg: $color-secondary;
$radial-menu-item-hovered-border-width: 0;
// $radial-menu-item-hovered-border-color: darken($color-secondary-darkest, 6%);
$radial-menu-item-hovered-border-color: transparent;
//
// LABEL
//–––––––––––––––––––––––––––––––––––––
$radial-menu-label-dimensions: 80px;
$radial-menu-label-font-size: 12px;
$radial-menu-label-font-weight: bold;
$radial-menu-label-bg: $color-primary-lightest;
$radial-menu-label-border-width: 3px;
$radial-menu-label-border-color: $color-primary-darker;
$radial-menu-label-font-color: $color-primary-darkest;
//
// MENU CONTENT
//–––––––––––––––––––––––––––––––––––––
$radial-menu-content-dimensions: 80px;
$radial-menu-content-bg: $color-primary-lightest;
$radial-menu-content-border-width: 3px;
$radial-menu-content-border-color: $color-primary-darker;
$radial-menu-content-bg-hover: $color-secondary-darkest;
$radial-menu-content-border-color-hover: $color-secondary-darkest;
$radial-menu-content-title-font-size: .7em;
$radial-menu-content-title-font-weight: bold;
$radial-menu-content-title-font-color: $white;
$radial-menu-content-description-font-size: .4em;
$radial-menu-content-description-font-weight: normal;
$radial-menu-content-description-font-color: rgba($white, .5);
//
// MENU ICON
//–––––––––––––––––––––––––––––––––––––
$radial-menu-icon-default-transform: translateY(-50%) translateX(-50%);
$radial-menu-icon-dimensions: 25px;
$radial-menu-icon-dimensions-hover: 50px;
$radial-menu-icon-icon-size: 16px;
$radial-menu-icon-icon-size-hover: 21px;
// $radial-menu-icon-bg: darken($color-primary-darkest, 8%);
// $radial-menu-icon-bg-hover: darken($color-primary-darkest, 4%);
// $radial-menu-icon-bg-hover: $white;
// $radial-menu-icon-bg-not-hovered: lighten($radial-menu-icon-bg, 4%);
$radial-menu-icon-bg: transparent;
$radial-menu-icon-bg-hover: transparent;
$radial-menu-icon-bg-hover: transparent;
$radial-menu-icon-bg-not-hovered: transparent;
$radial-menu-icon-color: darken($color-primary-darkest, 16%);
$radial-menu-icon-color-hover: $white;
$radial-menu-icon-color-not-hovered: darken($color-primary-darkest, 8%);
//
// MENU ITEM
//–––––––––––––––––––––––––––––––––––––
$radial-menu-item-default-transform: translateY(-50%);
$radial-menu-item-trapezoid-transform: perspective(200px) rotateY(-77.5deg) scaleX(1.25);
$radial-menu-item-bg: $color-primary-lighter;
// $radial-menu-item-bg-hover: $color-primary-lightest;
$radial-menu-item-bg-hover: $color-secondary;
$radial-menu-item-border-width: 1px;
$radial-menu-item-border-color: $color-primary;
$radial-menu-item-border-color-hover: $color-secondary;
$radial-menu-inset-bg: $color-primary-darkest;
// $radial-menu-inset-bg-hover: darken($color-primary-darkest, 4%);
$radial-menu-inset-bg-hover: $color-secondary;
//
// RADIAL MENU
//–––––––––––––––––––––––––––––––––––––
.radial-menu {
background: $radial-menu-bg;
border: $radial-menu-border-width solid $radial-menu-border-color;
border-radius: 50%;
box-shadow: 0 25px 50px rgba($black, .05);
height: $radial-menu-dimensions;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%) scale(1);
transition:
opacity .1s ease,
background .1s ease;
width: $radial-menu-dimensions;
&.is-hidden {
animation-name: scale-down;
animation-duration: .2s;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-timing-function: cubic-bezier(.25, .25, .25, 1.25);
transform: translate(-50%, -50%) scale(0) !important;
opacity: 0;
}
&.is-active {
animation-name: scale-up;
animation-duration: .2s;
animation-delay: 0;
animation-iteration-count: 1;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-timing-function: cubic-bezier(.25, .25, .25, 1.25);
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
&.item-is-hovered {
background-color: $radial-menu-item-hovered-bg;
border-color: $radial-menu-item-hovered-border-color;
border-width: $radial-menu-item-hovered-border-width;
}
}
@keyframes scale-up {
0% {
transform: translate(-50%, -50%) scale(0);
}
100% {
transform: translateX(-50%, -50%) scale(1);
}
}
@keyframes scale-down {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translateX(-50%, -50%) scale(0);
}
}
//
// LABEL
//–––––––––––––––––––––––––––––––––––––
.radial-menu__label {
background-color: $radial-menu-label-bg;
border: $radial-menu-label-border-width solid $radial-menu-label-border-color;
border-radius: 50%;
// box-shadow: 0 0 20px rgba(#fff, .2);
color: $radial-menu-label-font-color;
cursor: default;
font-size: $radial-menu-label-font-size;
font-weight: $radial-menu-label-font-weight;
height: $radial-menu-label-dimensions;
left: 50%;
letter-spacing: .1em;
line-height: $radial-menu-label-dimensions - ($radial-menu-label-border-width * 2);
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
transform: translate(-50%, -50%);
width: $radial-menu-label-dimensions;
z-index: 4;
}
.radial-menu {
&.item-is-hovered {
.radial-menu__label {
// transform: translate(-50%, -50%) scale(1.1);
}
}
}
//
// MENU CONTENT
//–––––––––––––––––––––––––––––––––––––
.radial-menu__menu-content {
background-color: $radial-menu-content-bg;
border: $radial-menu-content-border-width solid $radial-menu-content-border-color;
border-radius: 50%;
height: $radial-menu-content-dimensions;
left: 50%;
// opacity: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
// transition: all .1s ease;
width: $radial-menu-content-dimensions;
z-index: 1;
}
// Hover.
.radial-menu__menu-item {
&.hovered {
.radial-menu__menu-content {
background-color: $radial-menu-content-bg-hover;
border-color: $radial-menu-content-border-color-hover;
// opacity: 1;
transform: translate(-50%, -50%);
z-index: 4;
}
}
}
.radial-menu__menu-content-wrapper {
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.radial-menu__menu-content-title {
color: $radial-menu-content-title-font-color;
font-size: $radial-menu-content-title-font-size;
font-weight: $radial-menu-content-title-font-weight;
// letter-spacing: .05em;
// margin-bottom: 4px;
line-height: 1.3;
// text-transform: uppercase;
}
.radial-menu__menu-content-description {
color: $radial-menu-content-description-font-color;
display: none;
font-size: $radial-menu-content-description-font-size;
font-weight: $radial-menu-content-description-font-weight;
letter-spacing: .1em;
line-height: 1.3;
text-transform: uppercase;
}
//
// MENU ICON
//–––––––––––––––––––––––––––––––––––––
.radial-menu__menu-icon {
background-color: $radial-menu-icon-bg;
// border-radius: 50%;
// display: none; // OFF
height: $radial-menu-icon-dimensions;
left: 0;
position: absolute;
text-align: center;
top: 0;
transform: $radial-menu-icon-default-transform;
width: $radial-menu-icon-dimensions;
z-index: 2;
.oi {
color: $radial-menu-icon-color;
font-size: $radial-menu-icon-icon-size;
line-height: $radial-menu-icon-dimensions;
transition:
font-size .3s cubic-bezier(.25, .25, .25, 1.5),
color .1s ease;
}
}
// Not hovered.
.radial-menu {
&.item-is-hovered {
.radial-menu__menu-icon {
background-color: $radial-menu-icon-bg-not-hovered;
.oi {
color: $radial-menu-icon-color-not-hovered;
}
}
}
}
// Hovered.
.radial-menu {
&.item-is-hovered {
.radial-menu__menu-item {
&.hovered {
.radial-menu__menu-icon {
background-color: $radial-menu-icon-bg-hover;
height: $radial-menu-icon-dimensions-hover;
width: $radial-menu-icon-dimensions-hover;
.oi {
color: $radial-menu-icon-color-hover;
font-size: $radial-menu-icon-icon-size-hover;
line-height: $radial-menu-icon-dimensions-hover;
}
}
}
}
}
}
//
// MENU LIST
//–––––––––––––––––––––––––––––––––––––
.radial-menu__menu-list {
list-style-type: none;
margin: 0;
padding: 0;
}
//
// MENU ITEM
//–––––––––––––––––––––––––––––––––––––
.radial-menu__menu-item {
display: block;
left: 50%;
position: absolute;
top: 50%;
z-index: 1;
&.hovered {
z-index: 10;
}
}
//
// MENU LINK
//–––––––––––––––––––––––––––––––––––––
.radial-menu__menu-link,
.radial-menu__menu-link-bg {
height: 22px;
padding: 5px 20px;
position: absolute;
transform: $radial-menu-item-default-transform $radial-menu-item-trapezoid-transform;
transform-origin: 0;
transform-style: preserve-3d;
width: 125px;
}
.radial-menu__menu-link {
border-bottom: $radial-menu-item-border-width solid transparent;
border-top: $radial-menu-item-border-width solid transparent;
display: block;
z-index: 3;
}
//
// MENU LINK BG
//–––––––––––––––––––––––––––––––––––––
.radial-menu__menu-link-bg {
background-color: $radial-menu-item-bg;
border-bottom: $radial-menu-item-border-width solid $radial-menu-item-border-color;
border-top: $radial-menu-item-border-width solid $radial-menu-item-border-color;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
transition: background .1s ease;
z-index: 1;
&:after {
background: $radial-menu-inset-bg;
content: '';
display: none;
// height: 100%;
height: 106%;
right: -1px;
position: absolute;
top: 0;
transition: all .1s ease;
transform: translateY(-3%);
width: 2px;
}
}
// Hover.
.radial-menu__menu-item {
&.hovered {
.radial-menu__menu-link-bg {
background-color: $radial-menu-item-bg-hover;
// border-color: $radial-menu-item-border-color-hover;
// border-width: 0;
border: 0;
&:after {
background: $radial-menu-inset-bg-hover;
height: 106%;
transform: translateY(-3%);
width: 0;
}
}
}
}
//
// MENU ITEM SELECT
//–––––––––––––––––––––––––––––––––––––
.menu-items-select {
bottom: 0;
right: 0;
margin: 0 auto;
padding: 40px;
position: absolute;
// text-align: center;
}
.menu-items-select__label {
color: $color-primary-darkest;
display: block;
font-size: .7em;
font-weight: bold;
letter-spacing: .05em;
margin-bottom: 10px;
text-transform: uppercase;
}
.menu-items-select__select {
appearance: none;
background-color: $color-primary-lightest;
// Black dropdown arrow.
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpjYmU2ZGJmMC0zMWRkLTQyN2EtYjIyYi02YjExMGU5ZDVmODciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REM2MzE0REVCNjkzMTFFNkIxODVBOTBFNDM1NDFDOEUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REM2MzE0RERCNjkzMTFFNkIxODVBOTBFNDM1NDFDOEUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmI4YTU2Zjg5LTM0MzAtNDcxNS1iOGQyLWQ5NWM4NzdmYmIyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpjYmU2ZGJmMC0zMWRkLTQyN2EtYjIyYi02YjExMGU5ZDVmODciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4RdGokAAAAf0lEQVR42mL8//8/AzUBEwOVwaiBlAMWbIKMjIxEG4CeSujq5fkgB+DBC3E6GR1DARcQX8Zh2HUg5samH5+BIKABxF/QDPsKxLq4HETIQBCIQTMwFZ8PiTEQBGZBDVtKKMiINZATiFcCMS8hAxmxGUBJOmQhRtFo4UBfAwECDADAD7B6p+ae7AAAAABJRU5ErkJggg==');
background-position: 97.5% 50%;
background-repeat: no-repeat;
border: 2px solid $color-primary;
border-radius: 0;
display: block;
font-family: sans-serif;
font-size: .9em;
font-weight: bold;
height: 40px;
padding: 5px 10px;
width: 100px;
}
//
// MENU ITEM SELECT
//–––––––––––––––––––––––––––––––––––––
.right-click-prompt {
bottom: 0;
color: $color-primary-darkest;
font-size: .7em;
font-weight: bold;
left: 50%;
letter-spacing: .05em;
padding: 40px;
position: absolute;
text-transform: uppercase;
transform: translateX(-50%);
}
@media (max-height: 430px) {
.right-click-prompt {
left: 0;
transform: translateX(0);
}
}
Другие вопросы по теме
Есть ли шанс получить такую форму в html / css?
Как заставить element.scrollintoview работать в позиции: фиксированный нижний колонтитул
Запуск щелчка по нажатию клавиши внутри списка
Разметка текстовых блоков с несколькими цитатами в HTML
Мобильное только пустое пространство между равными css-float div
Попытка сделать кнопку отображаемой только для элементов, для которых установлено значение переменной
Запретить контекстное меню открываться при щелчке правой кнопкой мыши по элементу
Замороженные столбцы и строки для большой прокручиваемой таблицы
Как получить значения атрибутов от детей (HTML) в XPath
Как принять дату ввода от пользователя с помощью HTML / JavaScript в Dynamics 365?
Похожие вопросы
Установите флажок, нажав на div - не работает с другой функцией
Запуск щелчка по нажатию клавиши внутри списка
Флажки и загрузка нескольких файлов при отправке?
Замороженные столбцы и строки для большой прокручиваемой таблицы
Странная ошибка в JQuery? Неожиданный маркер
Как получить идентификатор в модальном режиме из списка при открытии модального всплывающего окна в MVC
Вторая строка заголовка DataTables для фильтрации
Завершите метод onClick и значение on
GETJson передает два параметра серверу
Переменная внутри addEventListener не работает
Пожалуйста, разместите код этой формы колеса. Если возможно, сделайте исполняемый фрагмент.