HTML/CSS

Стиль и размер ReCaptcha

В продолжении статьи «как интегрировать ReCAPTCHA на сайт» возникает другой вопрос - как изменить ее размер?

Оригинальный размер капчи составляет 304x78 px и чаще всего она не помещается в габариты формы сайта. Исправить это можно следующими способами:

1

Компактный вид

Включить его можно добавлением атрибута data-size="compact", размер становится 164x144 px.

<script src="https://www.google.com/recaptcha/api.js"></script>
<div data-size="compact" class="g-recaptcha" data-sitekey="xxx"></div>
2

Уменьшение масштаба

Уменьшить размер капчи можно свойством CSS3 transform:

<script src="https://www.google.com/recaptcha/api.js"></script>
<div style="transform:scale(0.8); transform-origin:0;" class="g-recaptcha" data-sitekey="xxx"></div>

Ниже приведена таблица значений transform и ширины капчи:

CSS Ширина
transform: scale(0.7); 212 px
transform: scale(0.75); 228 px
transform: scale(0.8); 243 px
transform: scale(0.85); 258 px
transform: scale(0.9); 273 px
transform: scale(0.95); 288 px
3

Темная тема

Включается атрибутом data-theme="dark".

<script src="https://www.google.com/recaptcha/api.js"></script>
<div data-theme="dark" class="g-recaptcha" data-sitekey="xxx"></div>
19 февраля 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.