Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow 😉
Create a smooth continuous slider for all kinds of content such as testimonials, logos, and more. Use simple attributes to control the settings of each ticker.
<!-- CODECRUMBS TICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/ticker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.Ticker({
tickerSelector: ".cc-ticker"
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
A beautiful themeable date picker / calendar with plenty of useful options. Supports several languages, date ranges and much more.
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
dateFieldSelector: '.date-field-class',
format: 'M S y',
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
One click trigger to change & swap text, urls, attributes, display properties and more.
<!-- SWAP VALUES ON CLICK -->
<script>
function setupSwitcher({
/* Click Trigger Class */
swapTrigger = "switcher",
/* Essentials */
swapText = "swap-text",
swapDisplay = "swap-display",
swapClass = "swap-class",
swapUrl = "swap-url",
/* Toggle and Add Attributes */
swapToggleAttribute = "swap-toggle-attribute",
swapAddAttribute = "swap-add-attribute",
swapAddAttributeValue = "swap-add-attribute-value",
/* Replace Attribute Value */
swapAttributeTarget = "swap-attribute-target",
swapTargetValue = "swap-target-value"
} = {}) {
const swapAll = () => {
// SWAP TEXT
document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapText);
const currentValue = swapDomElement.innerText;
swapDomElement.innerText = nextValue;
swapDomElement.setAttribute(swapText, currentValue);
});
// SWAP DISPLAY
document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapDisplay);
const currentValue = swapDomElement.style.display;
swapDomElement.style.display = nextValue;
swapDomElement.setAttribute(swapDisplay, currentValue);
});
// SWAP CLASS
document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapClass);
swapDomElement.classList.toggle(nextValue);
});
// SWAP URL
document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapUrl);
const currentValue = swapDomElement.href;
swapDomElement.href = nextValue;
swapDomElement.setAttribute(swapUrl, currentValue);
});
// TOGGLE ATTRIBUTE
document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
const toggleAttribute = swapDomElement.getAttribute(
swapToggleAttribute
);
swapDomElement.toggleAttribute(toggleAttribute);
});
// ADD ATTRIBUTE
document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
const newAttributeValue = swapDomElement.getAttribute(
swapAddAttributeValue
);
if (swapDomElement.hasAttribute(newAttribute)) {
swapDomElement.removeAttribute(newAttribute);
} else {
swapDomElement.setAttribute(newAttribute, newAttributeValue);
}
});
// REPLACE ATTRIBUTE VALUE
document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
const attributeTarget = swapDomElement.getAttribute(
swapAttributeTarget
);
let attributeValue = swapDomElement.getAttribute(attributeTarget);
let newValue = swapDomElement.getAttribute(swapTargetValue);
swapDomElement.setAttribute(attributeTarget, newValue);
swapDomElement.setAttribute(swapTargetValue, attributeValue);
});
};
document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
switcherDomElement.addEventListener("click", swapAll);
});
}
setupSwitcher();
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Find all text that matches a string value, wrap them in a span element to style and/or replace the string value.
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS -->
<script>
const targetStrings = [
{
selector: 'h2',
targetString: 'String 1',
replacementString: 'String 1 replacement',
appendedClassName: 'class-name-here',
},
{
selector: 'p',
targetString: 'String 2',
replacementString: 'String 1 replacement',
appendedClassName: 'class-name-here',
},
]
function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
const hasClassAttr = newClass ? `class=${newClass}` : ''
const wrapAndReplace = !replacement
? `<span ${hasClassAttr}>$1</span>`
: `<span ${hasClassAttr}>${replacement}</span>`;
Array.from(document.querySelectorAll(selector)).forEach((element) => {
element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
});
}
document.addEventListener('DOMContentLoaded', () => {
targetStrings.forEach(({
selector,
targetString,
replacementString,
appendedClassName
}) => {
wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
})
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
With this crumb we can simply create what is commonly known as floating form labels. A UI effect that allows you to display form labels as placeholders initially and animate them to typical labels.
<!-- FORM STYLES -->
<style>
.input-label {
pointer-events: none;
}
.input::placeholder {
opacity: 0;
transition: opacity .2s ease-out;
}
.input:focus::placeholder {
opacity: 1;
}
</style>
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.1/index.min.js"></script>
<script>
window.CodeCrumbs.FloatLabels({
inputSelector: ".input",
labelActiveClass: "float",
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Shape the edge of your sections, buttons or other elements to give them more character with some CSS using the clip-path property.
<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport */
.cp-1{
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}
.cp-2{
clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}
.cp-3{
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}
.cp-4{
clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}
.cp-btn {
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
-webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}
.cp-btn:hover {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
-webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Add a custom date picker to your form for consistent date input. No more manually typing it in for your visitors. Customize the look to match your design.
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
/* Color Settings */
--accent-color: #7262e6; /* Controls BG Color for Selected Date */
--secondary-accent-color: #9287e2; /* Controls Text Color for Current Date */
--main-bg-color: #1f2023; /* Controls BG Color of the Calendar */
--secondary-bg-color: #27292d; /* Controls BG for Calendar Dates */
--heading-color: #ffffff; /* Controls Main Heading Color */
--font-color: #c1c9d2; /* Controls Main Font Color */
--accent-top-text-color: #ffffff; /* Controls Font Color on top of Accent Color */
--disabled-font-color: #999999; /* Controls Disabled Font Color */
--shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
/* Size & Spacing Settings */
--border-radius: 4px; /* Controls Large Border Radius (Calendar Itself) */
--border-radius-sm: 2px; /* Controls Small Border Radius (Calendar Dates) */
--font-size: 16px; /* Controls Font Size */
--table-gap: 2px; /* High number is not recommended */
/* Arrow Icons */
--left-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
--right-arrow: url('https://assets-global.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');
--arrow-bg-color: transparent;
}
/* Picker Element Itself */
.pika-single {
color: var(--heading-color);
background: var(--main-bg-color);
border: none !important;
border-bottom-color: none !important;
border-radius: var(--border-radius);
font-family: inherit !important;
}
/* Datepicker Shadow */
.pika-single.is-bound {
box-shadow: var(--shadow-color) !important;
}
/* Month & Year Displayed in Middle */
.pika-label {
color: var(--heading-color);
background-color: transparent !important;
}
.pika-prev, .is-rtl .pika-next {
background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
background-image: var(--right-arrow);
}
/* This is the table element which includes the days labels and the days in the month */
.pika-table {
border-spacing: var(--table-gap) !important;
border-collapse: separate;
font-size: var(--font-size) !important;
}
/* Days of the Week Labels */
.pika-table th {
color: var(--font-color);
text-align: center;
}
/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
text-decoration: none !important;
cursor: default !important;
}
/* Month Days on Calendar - Default State */
.pika-button {
color: var(--font-color);
background: var(--secondary-bg-color);
border-radius: var(--border-radius-sm);
text-align: center;
font-size: 12px !important;
}
/* Week Label */
.pika-week {
color: var(--font-color);
}
/* Current Day Text/Number Color */
.is-today .pika-button {
color: var(--secondary-accent-color) !important;
}
/* The Selected Date/Day */
.is-selected .pika-button {
color: var(--accent-top-text-color) !Important;
background: var(--accent-color);
box-shadow: none !important;
}
/* Styles for any Disabled Dates/Days */
.is-disabled .pika-button {
color: var(--disabled-font-color);
opacity: .3;
background: transparent !important;
}
/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
color: var(--accent-top-text-color) !important;
background: var(--accent-color) !important;
border-radius: var(--border-radius-sm) !important;
}
/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
display: block;
cursor: pointer;
position: relative;
outline: none;
border: 0;
padding: 0;
width: 20px;
height: 30px;
text-indent: 20px;
white-space: nowrap;
overflow: hidden;
background-color: var(--arrow-bg-color) !important;
opacity: .5;
}
</style>
<!-- DATE PICKER JS -->
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
disableWeekends: true, // Disables option to select weekend days
firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
minDate: new Date(), // Disables option to select days prior to current day
//yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.
});
//Sets Default Date to Current Date
picker.gotoToday()
</script>
<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() { // ".date-picker" is the class name you would set on each field that needs a date picker.
$(this).data('pikaday', new Pikaday({
field: $(this)[0],
disableWeekends: true, // Disables option to select weekend days
firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
minDate: new Date(), // Disables option to select days prior to current day
//yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.
}));
});
//Sets Default Date to Current Date
picker.gotoToday()
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Smooth accordion that automatically closes an accordion item when a new one is selected. All elements are handled directly in Webflow.
<!-- Javascript Accordion Styles -->
<style>
.js-accordion-body {
display: none;
}
</style>
<!-- Javascript Accordion -->
<script>
// Accordion Settings
const accSettings = {
speed: 300, // Animation speed
oneOpen: true, // Close all other accordion items if true
offsetAnchor: true, // Activate scroll to top for active item
offsetFromTop: 180, // In pixels – Scroll to top at what distance
scrollTopDelay: 400, // In Milliseconds – Delay before scroll to top
classes: {
accordion: 'js-accordion',
header: 'js-accordion-header',
item: 'js-accordion-item',
body: 'js-accordion-body',
icon: 'js-accordion-icon',
active: 'active',
}
};
const prefix = accSettings.classes
const accordion = (function(){
const accordionElem = $(`.${prefix.accordion}`)
const accordionHeader = accordionElem.find(`.${prefix.header}`)
const accordionItem = $(`.${prefix.item}`)
const accordionBody = $(`.${prefix.body}`)
const accordionIcon = $(`.${prefix.icon}`)
const activeClass = prefix.active
return {
// pass configurable object literal
init: function(settings) {
accordionHeader.on('click', function() {
accordion.toggle($(this));
if(accSettings.offsetAnchor) {
setTimeout(() => {
$('html').animate({scrollTop: $(this).offset().top-accSettings.offsetFromTop}, accSettings.speed);
}, accSettings.scrollTopDelay);
}
});
$.extend(accSettings, settings);
// ensure only one accordion is active if oneOpen is true
if(settings.oneOpen && $(`.${prefix.item}.${activeClass}`).length > 1) {
$(`.${prefix.item}.${activeClass}:not(:first)`).removeClass(activeClass).find(`.${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
}
// reveal the active accordion bodies
$(`.${prefix.item}.${activeClass}`).find(`> .${prefix.body}`).show();
},
toggle: function($this) {
if(accSettings.oneOpen && $this[0] != $this.closest(accordionElem).find(`> .${prefix.item}.${activeClass} > .${prefix.header}`)[0]) {
$this.closest(accordionElem).find(`> .${prefix.item}`).removeClass(activeClass).find(accordionBody).slideUp(accSettings.speed);
$this.closest(accordionElem).find(`> .${prefix.item}`).find(`> .${prefix.header} > .${prefix.icon}`).removeClass(activeClass);
}
// show/hide the clicked accordion item
$this.closest(accordionItem).toggleClass(`${activeClass}`).find(`> .${prefix.header} > .${prefix.icon}`).toggleClass(activeClass);
$this.next().stop().slideToggle(accSettings.speed);
}
}
})();
$(document).ready(function(){
accordion.init(accSettings);
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Disable the option for any user to highlight and select an element on your web page.
<!-- DISABLES TEXT SELECT -->
<style>
/* disable user selection of an element */
.noselect {
-webkit-user-select: none; /* webkit browsers */
-khtml-user-select: none; /* Konqueror browser */
-moz-user-select: none; /* firefox browser */
-ms-user-select: none; /* internet explorer & edge */
user-select: none;
}
</style>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This simple CSS snippet will apply a background frosted blur effect like Apple is known for.
<!-- APPLE FROST BLUR -->
<style>
.frost-blur {
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
}
</style>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
With this snippet you can change the selection / highlight colors that you see when selecting a bit of text for example.
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR -->
<style>
:-moz-selection { color: #000; background: #90fcdc;}
::selection { color: #000; background: #90fcdc;}
</style>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This awesome code crumb will hide the submit button on any form until the email is validated in the email input field. Adds a really nice visual experience.
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED -->
<script>
$(function(){
// Only show submit button on proper email
;( function( $, window, document, undefined ) {
'use strict';
var form = '.email-form',
className = 'email-active',
submit = 'input[type="submit"]',
email = 'input[type="email"]';
$( form ).each( function(){
var $form = $( this ),
$email = $form.find( email ),
$submit = $form.find( submit ),
val = '';
$email.on( 'keyup.addClassWhenEmail', function(){
val = $email.val();
$submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );
});
});
})( jQuery, window, document );
})
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This snippet will generate the text dynamically for the correct weekday where ever you want in your project.
<!-- DYNAMIC WEEKDAY -->
<script>
// for each .weekday element
document.querySelectorAll('.weekday').forEach(weekday => {
// get today's day
const today = new Intl.DateTimeFormat('en', {weekday:'long'}).format(new Date());
// set it as the current text
weekday.textContent = today;
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This short Javascript code crumb will allow you to dynamically set the current year for your © copyright year in your footer automatically.
<!-- Dynamic Copyright Year -->
<script>
// For using a class to select multiple elements
const yearElems = document.querySelectorAll(".year")
yearElems.forEach(function(yearElem) {
yearElem.innerText = new Date().getFullYear()
})
</script>
<!-- Dynamic Copyright Year -->
<script>
// For targeting a single element using ID
function copyrightYear() {
const yearElem = document.getElementById("year")
yearElem.innerText = new Date().getFullYear()
}
copyrightYear()
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This snippet allows you to customize the select field for your forms replacing the default select UI and UX for an arguably nicer one.
<!-- Custom Select Field Styles -->
<style>
/************ ADD YOUR VALUES BELOW ************/
:root {
/* ----------- Colors ----------- */
--list-bg-color: white;
--list-text-color: inherit; /* Use "inherit" to take on parent text color */
--select-field-arrow-color: black; /* This is the select field arrow color */
--border-color-active: black; /* Active State */
--border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
--list-item-bg-color: #ededed; /* Select Field Hover/Focus State */
/* ----------- Spacing ----------- */
--select-field-padding-left: 12px; /* Match the padding values for your form fields */
--select-field-padding-right: 12px; /* Match the padding values for your form fields */
--list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
--list-max-height: 150px; /* You can set this to "Auto" as well */
--list-item-padding-left: 18px;
--list-item-padding-right: 18px;
--list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
--list-item-line-height: 40px; /* This is the height of each list item in the dropdown */
/* ^^^ Make sure both "line-height" and "min-height" are the same! ^^^ */
}
/************ END OF CUSTOM VALUES ************/
.nice-select {
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
clear: both;
padding-left: var(--select-field-padding-left);
padding-right: var(--select-field-padding-right);
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.nice-select:hover {
border-color: var(--border-color-hover);
}
.nice-select:active, .nice-select.open, .nice-select:focus {
border-color: var(--border-color-active);
}
.nice-select:after {
border-bottom: 2px solid var(--select-field-arrow-color);
border-right: 2px solid var(--select-field-arrow-color);
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled:after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: var(--list-bg-color);
color: var(--list-text-color);
border-radius: 5px;
box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
border-color: 3px solid #ededed;
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: var(--list-padding-top-bottom) 0px;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
max-height: var(--list-max-height);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent !important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: var(--list-item-line-height);
list-style: none;
min-height: var(--list-item-min-height);
outline: none;
padding-left: var(--list-item-padding-left);
padding-right: var(--list-item-padding-right);
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option:first-child {
display: none;
}
span.current {
color: var(--list-text-color);
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
background-color: var(--list-item-bg-color);
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
</style>
<!-- CUSTOM SELECT FIELD -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<script>
$(document).ready(function() {
$('select').niceSelect();
});
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This small snippet allows you to animate or add a transition to your placeholder text when an input field is focused. You can expand on the transition animations to whatever you'd like.
<!-- Input Field Placeholder Animation -->
<style>
::placeholder {
transition: all 350ms ease;
}
.your-input-class:focus::placeholder {
transform: translate(20px, 0);
opacity: 0.0;
}
.your-textarea-class:focus::placeholder {
transform: translate(20px, 0);
opacity: 0.0;
}
</style>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Here is an HTML table you can use in your Rich Text Elements or E-Commerce websites for products or simply to show data since Webflow doesn't natively support it yet.
<!-- HTML TABLE -->
<style>
/* ----------------------------- TABLE STYLES ----------------------------- */
:root {
/* TABLE COLORS */
--table-header-font-color: #ffffff;
--table-header-bg-color: teal;
--table-header-border-color: #ffffff;
--table-cell-font-color: #777777;
--table-cell-border-color: #d2d2d2;
--table-bg-color: #ffffff;
--table-border-color: #ffffff; /* Most Likely won't be seen */
/* TABLE DIMENSIONS */
--table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
--table-header-padding-left-right: 10px; /* headers left & right padding */
--table-heading-font-size: 18px;
--table-cell-padding-top-bottom: 10px; /* Cells top & bottom padding */
--table-cell-padding-left-right: 10px; /* Cells left & right padding */
--table-cell-font-size: 14px;
--table-cell-min-width: 200px;
--table-margin-bottom: 48px;
}
/* ----------------------------- END OF TABLE STYLES ----------------------------- */
/* DON'T NEED TO WORRY ABOUT THESE BELOW!!! */
.table-wrap {
overflow-x: scroll;
width: 100%;
margin-bottom: var(--table-margin-bottom);
}
table, th, td {
border-collapse: collapse;
}
table {
width: 100%;
border: 1px solid var(--table-border-color);
background-color: var(--table-bg-color);
}
th:last-child {
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-bg-color);
border-bottom: 1px solid var(--table-header-bg-color);
}
th {
text-align: left;
color: var(--table-header-font-color);
background-color: var(--table-header-bg-color);
padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
font-size: 16px;
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-border-color);
border-bottom: 1px solid var(--table-header-bg-color);
font-size: var(--table-heading-font-size);
}
td {
color: var(--table-cell-font-color);
border: 1px solid var(--table-cell-border-color);
padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
font-size: var(--table-cell-font-size);
}
th, td {
min-width: var(--table-cell-min-width);
}
</style>
<!-- ****TABLE CONTENT**** -->
<div class="table-wrap">
<table>
<!-- heading Columns -->
<tr>
<th>Shoe Type</th>
<th>Color</th>
<th>Size</th>
<th>Details</th>
</tr>
<!-- Row 1 -->
<tr>
<td>Running</td>
<td>White/Black</td>
<td>10.5, 11, 12</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<!-- Row 2 -->
<tr>
<td>Skateboarding</td>
<td>Black</td>
<td>6.5, 7, 8.5, 9, 9.5, 10.5, 12</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<!-- Row 3 -->
<tr>
<td>Hiking</td>
<td>Tan</td>
<td>7, 8.5, 9, 10.5, 11, 12</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
</table>
</div>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This one line of CSS code will ignore any cursor (pointer) event such as clicks or hovers etc.This can be useful if you have a video or a gif that is not necessary for your users to interact with.
<!-- Ignore Cursor Events -->
<style>
/* disable any cursor events e.g. click & hover */
.your-class-name {
pointer-events: none;
}
</style>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
This small bit of CSS will remove those unwanted shadows that show up on Safari's default input field styles. This way your forms input fields can look the way you intended them to.
<!--Removes iOS form styling-->
<style>
/* Set css appearance to none & border radius to 0 */
input, textarea {
-webkit-appearance: none; /* webkit browsers */
-moz-appearance: none; /* firefox browser */
appearance: none;
border-radius: 0;Â Â
}
</style>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
Never spam. Just honest updates about new snippets!