{"id":11,"date":"2007-07-09T14:27:24","date_gmt":"2007-07-09T21:27:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=11"},"modified":"2024-08-08T10:38:19","modified_gmt":"2024-08-08T16:38:19","slug":"contact","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/contact\/","title":{"rendered":"Contact"},"content":{"rendered":"<h2 class=\"wp-block-heading has-black-color has-text-color has-link-color wp-elements-3c78f516d2ba5aea9e14ac8c0c91ac6f\" id=\"hey-hi-and-hello\">Hey, hi, and hello!<\/h2>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Yep, we&#8217;ve got one of those embedded form thingy-s for you to fill out.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\nvar gform;gform||(document.addEventListener(\"gform_main_scripts_loaded\",function(){gform.scriptsLoaded=!0}),document.addEventListener(\"gform\/theme\/scripts_loaded\",function(){gform.themeScriptsLoaded=!0}),window.addEventListener(\"DOMContentLoaded\",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,themeScriptsLoaded:!1,isFormEditor:()=>\"function\"==typeof InitializeEditor,callIfLoaded:function(o){return!(!gform.domLoaded||!gform.scriptsLoaded||!gform.themeScriptsLoaded&&!gform.isFormEditor()||(gform.isFormEditor()&&console.warn(\"The use of gform.initializeOnLoaded() is deprecated in the form editor context and will be removed in Gravity Forms 3.1.\"),o(),0))},initializeOnLoaded:function(o){gform.callIfLoaded(o)||(document.addEventListener(\"gform_main_scripts_loaded\",()=>{gform.scriptsLoaded=!0,gform.callIfLoaded(o)}),document.addEventListener(\"gform\/theme\/scripts_loaded\",()=>{gform.themeScriptsLoaded=!0,gform.callIfLoaded(o)}),window.addEventListener(\"DOMContentLoaded\",()=>{gform.domLoaded=!0,gform.callIfLoaded(o)}))},hooks:{action:{},filter:{}},addAction:function(o,r,e,t){gform.addHook(\"action\",o,r,e,t)},addFilter:function(o,r,e,t){gform.addHook(\"filter\",o,r,e,t)},doAction:function(o){gform.doHook(\"action\",o,arguments)},applyFilters:function(o){return gform.doHook(\"filter\",o,arguments)},removeAction:function(o,r){gform.removeHook(\"action\",o,r)},removeFilter:function(o,r,e){gform.removeHook(\"filter\",o,r,e)},addHook:function(o,r,e,t,n){null==gform.hooks[o][r]&&(gform.hooks[o][r]=[]);var d=gform.hooks[o][r];null==n&&(n=r+\"_\"+d.length),gform.hooks[o][r].push({tag:n,callable:e,priority:t=null==t?10:t})},doHook:function(r,o,e){var t;if(e=Array.prototype.slice.call(e,1),null!=gform.hooks[r][o]&&((o=gform.hooks[r][o]).sort(function(o,r){return o.priority-r.priority}),o.forEach(function(o){\"function\"!=typeof(t=o.callable)&&(t=window[t]),\"action\"==r?t.apply(null,e):e[0]=t.apply(null,e)})),\"filter\"==r)return e[0]},removeHook:function(o,r,t,n){var e;null!=gform.hooks[o][r]&&(e=(e=gform.hooks[o][r]).filter(function(o,r,e){return!!(null!=n&&n!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][r]=e)}});\n\/* ]]> *\/\n<\/script>\n\n                <div class='gf_browser_chrome gform_wrapper gform-theme gform-theme--foundation gform-theme--framework gform-theme--orbital' data-form-theme='orbital' data-form-index='0' id='gform_wrapper_2' style='display:none'><style>#gform_wrapper_2[data-form-index=\"0\"].gform-theme,[data-parent-form=\"2_0\"]{--gf-color-primary: #204ce5;--gf-color-primary-rgb: 32, 76, 229;--gf-color-primary-contrast: #fff;--gf-color-primary-contrast-rgb: 255, 255, 255;--gf-color-primary-darker: #001AB3;--gf-color-primary-lighter: #527EFF;--gf-color-secondary: #fff;--gf-color-secondary-rgb: 255, 255, 255;--gf-color-secondary-contrast: #112337;--gf-color-secondary-contrast-rgb: 17, 35, 55;--gf-color-secondary-darker: #F5F5F5;--gf-color-secondary-lighter: #FFFFFF;--gf-color-out-ctrl-light: rgba(17, 35, 55, 0.1);--gf-color-out-ctrl-light-rgb: 17, 35, 55;--gf-color-out-ctrl-light-darker: rgba(104, 110, 119, 0.35);--gf-color-out-ctrl-light-lighter: #F5F5F5;--gf-color-out-ctrl-dark: #585e6a;--gf-color-out-ctrl-dark-rgb: 88, 94, 106;--gf-color-out-ctrl-dark-darker: #112337;--gf-color-out-ctrl-dark-lighter: rgba(17, 35, 55, 0.65);--gf-color-in-ctrl: #fff;--gf-color-in-ctrl-rgb: 255, 255, 255;--gf-color-in-ctrl-contrast: #112337;--gf-color-in-ctrl-contrast-rgb: 17, 35, 55;--gf-color-in-ctrl-darker: #F5F5F5;--gf-color-in-ctrl-lighter: #FFFFFF;--gf-color-in-ctrl-primary: #ff6900;--gf-color-in-ctrl-primary-rgb: 255, 105, 0;--gf-color-in-ctrl-primary-contrast: #fff;--gf-color-in-ctrl-primary-contrast-rgb: 255, 255, 255;--gf-color-in-ctrl-primary-darker: #CD3700;--gf-color-in-ctrl-primary-lighter: #FF9B32;--gf-color-in-ctrl-light: rgba(17, 35, 55, 0.1);--gf-color-in-ctrl-light-rgb: 17, 35, 55;--gf-color-in-ctrl-light-darker: rgba(104, 110, 119, 0.35);--gf-color-in-ctrl-light-lighter: #F5F5F5;--gf-color-in-ctrl-dark: #585e6a;--gf-color-in-ctrl-dark-rgb: 88, 94, 106;--gf-color-in-ctrl-dark-darker: #112337;--gf-color-in-ctrl-dark-lighter: rgba(17, 35, 55, 0.65);--gf-radius: 3px;--gf-font-size-secondary: 14px;--gf-font-size-tertiary: 13px;--gf-icon-ctrl-number: url(\"data:image\/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='rgba(17, 35, 55, 0.65)'\/%3E%3C\/svg%3E\");--gf-icon-ctrl-select: url(\"data:image\/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(17, 35, 55, 0.65)'\/%3E%3C\/svg%3E\");--gf-icon-ctrl-search: url(\"data:image\/svg+xml,%3Csvg width='640' height='640' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M256 128c-70.692 0-128 57.308-128 128 0 70.691 57.308 128 128 128 70.691 0 128-57.309 128-128 0-70.692-57.309-128-128-128zM64 256c0-106.039 85.961-192 192-192s192 85.961 192 192c0 41.466-13.146 79.863-35.498 111.248l154.125 154.125c12.496 12.496 12.496 32.758 0 45.254s-32.758 12.496-45.254 0L367.248 412.502C335.862 434.854 297.467 448 256 448c-106.039 0-192-85.962-192-192z' fill='rgba(17, 35, 55, 0.65)'\/%3E%3C\/svg%3E\");--gf-label-space-y-secondary: var(--gf-label-space-y-md-secondary);--gf-ctrl-border-color: #686e77;--gf-ctrl-size: var(--gf-ctrl-size-md);--gf-ctrl-label-color-primary: #112337;--gf-ctrl-label-color-secondary: #112337;--gf-ctrl-choice-size: var(--gf-ctrl-choice-size-md);--gf-ctrl-checkbox-check-size: var(--gf-ctrl-checkbox-check-size-md);--gf-ctrl-radio-check-size: var(--gf-ctrl-radio-check-size-md);--gf-ctrl-btn-font-size: var(--gf-ctrl-btn-font-size-md);--gf-ctrl-btn-padding-x: var(--gf-ctrl-btn-padding-x-md);--gf-ctrl-btn-size: var(--gf-ctrl-btn-size-md);--gf-ctrl-btn-border-color-secondary: #686e77;--gf-ctrl-file-btn-bg-color-hover: #EBEBEB;--gf-field-img-choice-size: var(--gf-field-img-choice-size-md);--gf-field-img-choice-card-space: var(--gf-field-img-choice-card-space-md);--gf-field-img-choice-check-ind-size: var(--gf-field-img-choice-check-ind-size-md);--gf-field-img-choice-check-ind-icon-size: var(--gf-field-img-choice-check-ind-icon-size-md);--gf-field-pg-steps-number-color: rgba(17, 35, 55, 0.8);}<\/style>\n                        <div class='gform_heading'>\n\t\t\t\t\t\t\t<p class='gform_required_legend'>&quot;<span class=\"gfield_required gfield_required_asterisk\">*<\/span>&quot; indicates required fields<\/p>\n                        <\/div><form method='post' enctype='multipart\/form-data'  id='gform_2'  action='\/wp-json\/wp\/v2\/pages\/11' data-formid='2' novalidate>\n                        <div class='gform-body gform_body'><div id='gform_fields_2' class='gform_fields top_label form_sublabel_below description_above validation_below'><div id=\"field_2_27\" class=\"gfield gfield--type-honeypot gform_validation_container field_sublabel_below gfield--has-description field_description_above field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_27'>Instagram<\/label><div class='gfield_description' id='gfield_description_2_27'>This field is for validation purposes and should be left unchanged.<\/div><div class='ginput_container'><input name='input_27' id='input_2_27' type='text' value='' autocomplete='new-password'\/><\/div><\/div><fieldset id=\"field_2_1\" class=\"gfield gfield--type-name gfield--input-type-name gfield_contains_required field_sublabel_below gfield--no-description field_description_above field_validation_below gfield_visibility_visible\"  ><legend class='gfield_label gform-field-label gfield_label_before_complex' >Name<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/legend><div class='ginput_complex ginput_container ginput_container--name no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gform-grid-row' id='input_2_1'>\n                            \n                            <span id='input_2_1_3_container' class='name_first gform-grid-col gform-grid-col--size-auto' >\n                                                    <input type='text' name='input_1.3' id='input_2_1_3' value=''   aria-required='true'     \/>\n                                                    <label for='input_2_1_3' class='gform-field-label gform-field-label--type-sub '>First<\/label>\n                                                <\/span>\n                            \n                            <span id='input_2_1_6_container' class='name_last gform-grid-col gform-grid-col--size-auto' >\n                                                    <input type='text' name='input_1.6' id='input_2_1_6' value=''   aria-required='true'     \/>\n                                                    <label for='input_2_1_6' class='gform-field-label gform-field-label--type-sub '>Last<\/label>\n                                                <\/span>\n                            \n                        <\/div><\/fieldset><div id=\"field_2_3\" class=\"gfield gfield--type-email gfield--input-type-email gfield--width-full gfield_contains_required field_sublabel_below gfield--has-description field_description_above field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_3'>Email<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/label><div class='gfield_description' id='gfield_description_2_3'>What email address can we use to follow-up with you? You know, just in case.<\/div><div class='ginput_container ginput_container_email'>\n                            <input name='input_3' id='input_2_3' type='email' value='' class='large'    aria-required=\"true\" aria-invalid=\"false\" aria-describedby=\"gfield_description_2_3\" \/>\n                        <\/div><\/div><div id=\"field_2_14\" class=\"gfield gfield--type-select gfield--input-type-select gfield--width-full gfield_contains_required field_sublabel_below gfield--has-description field_description_above field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_14'>What&#039;s up?<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/label><div class='gfield_description' id='gfield_description_2_14'>This helps us funnel your message to the right person.<\/div><div class='ginput_container ginput_container_select'><select name='input_14' id='input_2_14' class='large gfield_select'  aria-describedby=\"gfield_description_2_14\"  aria-required=\"true\" aria-invalid=\"false\" ><option value='\u2014 Select an option \u2014' >\u2014 Select an option \u2014<\/option><option value='There&#039;s an error on the site' >There&#039;s an error on the site<\/option><option value='I want to share something' >I want to share something<\/option><option value='I have a coding question' >I have a coding question<\/option><\/select><\/div><\/div><div id=\"field_2_21\" class=\"gfield gfield--type-textarea gfield--input-type-textarea gfield--width-full gfield_contains_required field_sublabel_below gfield--no-description field_description_above field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_21'>Tell us about it&#8230;<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_asterisk\">*<\/span><\/span><\/label><div class='ginput_container ginput_container_textarea'><textarea name='input_21' id='input_2_21' class='textarea large'     aria-required=\"true\" aria-invalid=\"false\"   rows='10' cols='50'><\/textarea><\/div><\/div><div id=\"field_2_26\" class=\"gfield gfield--type-website gfield--input-type-website gfield--width-full field_sublabel_below gfield--has-description field_description_above field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_2_26'>Where&#039;s it at?<\/label><div class='gfield_description' id='gfield_description_2_26'>If you can share a URL to the problem, that&#8217;d be great!<\/div><div class='ginput_container ginput_container_website'>\n                    <input name='input_26' id='input_2_26' type='url' value='' class='large'  aria-describedby=\"gfield_description_2_26\"  placeholder='https:\/\/'  aria-invalid=\"false\" \/>\n                <\/div><\/div><\/div><\/div>\n        <div class='gform-footer gform_footer top_label'> <input type='submit' id='gform_submit_button_2' class='gform_button button' onclick='gform.submission.handleButtonClick(this);' data-submission-type='submit' value='Send it!'  \/> \n            <input type='hidden' class='gform_hidden' name='gform_submission_method' data-js='gform_submission_method_2' value='postback' \/>\n            <input type='hidden' class='gform_hidden' name='gform_theme' data-js='gform_theme_2' id='gform_theme_2' value='orbital' \/>\n            <input type='hidden' class='gform_hidden' name='gform_style_settings' data-js='gform_style_settings_2' id='gform_style_settings_2' value='{&quot;inputPrimaryColor&quot;:&quot;#ff6900&quot;}' \/>\n            <input type='hidden' class='gform_hidden' name='is_submit_2' value='1' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submit' value='2' \/>\n            \n            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' \/>\n            <input type='hidden' class='gform_hidden' name='state_2' value='WyJ7XCIxNFwiOltcImZkN2I2MDBhNWJjNDJlMWMwYTIzZDYxOTJmMDA3NGZkXCIsXCJkNzM3YzlhYWY3YTk4YWQyY2E5Zjk4ZjU5MjgyZTc4NlwiLFwiYjM3MmM4NGI5MzRhM2RhYTE1ZTAyYWY1MjM2MTRkMWZcIixcImY5YTdlNGY3M2ZkYjA2NjExNTcyMjcwN2Y0ZjhlNzI1XCJdfSIsIjVkMTRlYjc5Y2E5OTQyYzE4MDM2MWY0NzMwZGQ4ZjAzIl0=' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_target_page_number_2' id='gform_target_page_number_2' value='0' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_source_page_number_2' id='gform_source_page_number_2' value='1' \/>\n            <input type='hidden' name='gform_field_values' value='' \/>\n            \n        <\/div>\n                        <p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"ak_\"><label>&#916;<textarea name=\"ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"ak_js\" value=\"12\"\/><script>document.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );<\/script><\/p><\/form>\n                        <\/div><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https:\/\/css-tricks.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', false );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){form_content.find('form').css('opacity', 0);jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { \/* delay the scroll by 50 milliseconds to fix a bug in chrome *\/  }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https:\/\/css-tricks.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', false );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger(\"gform_pre_post_render\", [{ formId: \"2\", currentPage: \"current_page\", abort: function() { this.preventDefault(); } }]);        if (event && event.defaultPrevented) {                return;        }        const gformWrapperDiv = document.getElementById( \"gform_wrapper_2\" );        if ( gformWrapperDiv ) {            const visibilitySpan = document.createElement( \"span\" );            visibilitySpan.id = \"gform_visibility_test_2\";            gformWrapperDiv.insertAdjacentElement( \"afterend\", visibilitySpan );        }        const visibilityTestDiv = document.getElementById( \"gform_visibility_test_2\" );        let postRenderFired = false;        function triggerPostRender() {            if ( postRenderFired ) {                return;            }            postRenderFired = true;            gform.core.triggerPostRenderEvents( 2, current_page );            if ( visibilityTestDiv ) {                visibilityTestDiv.parentNode.removeChild( visibilityTestDiv );            }        }        function debounce( func, wait, immediate ) {            var timeout;            return function() {                var context = this, args = arguments;                var later = function() {                    timeout = null;                    if ( !immediate ) func.apply( context, args );                };                var callNow = immediate && !timeout;                clearTimeout( timeout );                timeout = setTimeout( later, wait );                if ( callNow ) func.apply( context, args );            };        }        const debouncedTriggerPostRender = debounce( function() {            triggerPostRender();        }, 200 );        if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) {            const observer = new MutationObserver( ( mutations ) => {                mutations.forEach( ( mutation ) => {                    if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) {                        debouncedTriggerPostRender();                        observer.disconnect();                    }                });            });            observer.observe( document.body, {                attributes: true,                childList: false,                subtree: true,                attributeFilter: [ 'style', 'class' ],            });        } else {            triggerPostRender();        }    } );} ); \n\/* ]]> *\/\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shoot us a note!<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"class_list":["post-11","page","type-page","status-publish","hentry"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack-related-posts":[{"id":373609,"url":"https:\/\/css-tricks.com\/almanac\/pseudo-selectors\/a\/autofill\/","url_meta":{"origin":11,"position":0},"title":":autofill","author":"Sunkanmi Fafowora","date":"September 27, 2022","format":false,"excerpt":"The :auto-fill pseudo-class in CSS allows us to style <input> elements that contain content auto-filled by the browser. Take a new user registration form as an example. Have you ever clicked or tapped into a field and seen a dropdown of suggestions for what to enter? Notice how the autocompleted\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":187280,"url":"https:\/\/css-tricks.com\/guest-writing\/","url_meta":{"origin":11,"position":1},"title":"Write for CSS-Tricks!","author":"Chris Coyier","date":"October 29, 2014","format":false,"excerpt":"Interesting in guest writing on CSS-Tricks? It can be a great thing for everyone: you, our readers, and the site itself. Read up on what our expectations are, what you can expect, and what the workflow is like.","rel":"","context":"In \"writing\"","block_context":{"text":"writing","link":"https:\/\/css-tricks.com\/tag\/writing\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254303,"url":"https:\/\/css-tricks.com\/snippets\/svg\/shape-morphing-icons-button-click\/","url_meta":{"origin":11,"position":2},"title":"Shape Morphing Icons in Button on Click","author":"Geoff Graham","date":"May 4, 2017","format":false,"excerpt":"The idea here is use an SVG icon in a button and swap that icon out for another when the button is clicked. A button click often suggests an action has been taken, so switching icons can be a nice UI touch to show the change in context and confirm\u2026","rel":"","context":"In \"shape morphing\"","block_context":{"text":"shape morphing","link":"https:\/\/css-tricks.com\/tag\/shape-morphing\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330211,"url":"https:\/\/css-tricks.com\/videos\/199-messing-with-jsx\/","url_meta":{"origin":11,"position":3},"title":"#199: Messing with JSX","author":"Chris Coyier","date":"December 9, 2020","format":false,"excerpt":"I probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets in JavaScript into a function call. So, if you write\u2026","rel":"","context":"In \"jsx\"","block_context":{"text":"jsx","link":"https:\/\/css-tricks.com\/tag\/jsx\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5732,"url":"https:\/\/css-tricks.com\/snippets\/html\/mailto-links\/","url_meta":{"origin":11,"position":4},"title":"Mailto Links","author":"Chris Coyier","date":"February 23, 2010","format":false,"excerpt":"Basic Open default mail program, create new message with the TO field already filled out. <a href=\"mailto:someone@yoursite.com\">Email Us<\/a> Adding a subject Open default mail program, create new message with the TO and SUBJECT field already filled out. Essentially we are adding the parameter subject to the href value. Spaces in\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1617,"url":"https:\/\/css-tricks.com\/videos\/21-walkthrough-of-contact-form\/","url_meta":{"origin":11,"position":5},"title":"#21: Walkthrough of Contact Form","author":"Chris Coyier","date":"December 10, 2008","format":false,"excerpt":"In some ways, the Contact Form is the \"Hello, World!\" application of web designers and web developers. It is nothing that hasn't been done before a million times, but it is symbolic of being able to control the design of a page as well as make a page truly functional.\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":379623,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/11\/revisions\/379623"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=11"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}