Usefuldevtools.com
☕

Ocean Deep Search

0 viewsadvanced
Background:
1
2
3
4
5
6
7
8
9
10
<div class="ocean_deep_search_input">
  <div class="input-container">
    <div class="input-background"></div>
    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.35-4.35"></path>
    </svg>
    <input type="text" class="styled-input" placeholder="Ocean Deep Search..." />
  </div>
</div>
Was this helpful?

What is inside Ocean Deep Search

Ocean Deep Search is a CSS button built with gradient fills, layered shadows, defined in 64 lines across 10 selectors.

18
CSS properties
10
Selectors
64
Lines of CSS
3
Formats

Techniques used

TransitionsGradientsShadowsHover stateFocus stateFlexbox

CSS properties in this component

align-itemsbackgroundborderborder-colorborder-radiusbox-shadowcolorcursordisplayflexinsetmarginmax-widthoutlinepaddingpositiontransitionwidth

Accessibility check

  • Built on a native <input> element, so keyboard focus and screen reader semantics work without extra attributes.
  • Defines a focus style for keyboard navigation.

These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, CSS, Tailwind and adapt it freely.