Ответы пользователя по тегу CSS
  • Как можно сделать такую анимацию?

    iLeonidze
    @iLeonidze
    xbooster.ru
    Насчёт CSS - вы думаете в очень правильном направлении, если я правильно понял Вашу цель. Но Вы должны понимать что это основательный костыль. Если бы Вы обрисовали задачу более конкретно, Вам бы здесь предложили бы более узкое решение.
    Касательно нагрузки, это будет зависеть от самой картинки. Если не шибко большая, где-то до 4000X4000, то вполне потянет, а дальше уже могут пойти зависания, скорее всего.
    Ответ написан
  • Bootstrap не для bootstrap дизайна?

    iLeonidze
    @iLeonidze
    xbooster.ru
    Никак :)
    А если серьезно, то придётся писать все под Bootstrap. Вот и задайтесь вопросом - подходит ли макет "который не под bootstrap" под те нужны, с которыми Вы хотите использовать Bootstrap. Да и нужно оно ли Вам? Неподходящий макет, например, имеющий другую сетку, создаст Вам много головной боли :)
    Ответ написан
  • Как сделать эти стрелки?

    iLeonidze
    @iLeonidze
    xbooster.ru
    Можно стандартными HTML с CSS3 (2 волшебных свойства: border и border-radius).
    В HTML делаете DIV (рядом с нужными Вам мышкой коробкой):
    <div class="Arrow TopLeft"></div>
    Затем в CSS делаете несколько правил:
    .Arrow{
    display:block;
    position:absolute;
    padding:0;
    margin:0;
    width:300px; // Вам потребуется самостоятельно подправить ширину/высоту
    height:250px;
    border-radius:50%;
    }
    .Arrow.TopLeft{
    margin:0 0 0 0; // Самостоятельно делаете позиционирование
    border-top-left:1px solid #6e6e6e;
    }

    И так дублируете необходимые субклассы для каждой .Arrow стрелки. Просто, сердито, очень даже векторно без канвасов и SVG :)
    Ответ написан
  • Как изменить описание сайта, когда я делюсь ссылкой в вк?

    iLeonidze
    @iLeonidze
    xbooster.ru
    Вам надо пользоваться OG-meta tags и Twitter-meta tags. Возможно в дальнейшем при оптимизации Вам потребуется весь набор:

    <meta name="keywords" content="zuru,zuru os,zuruos,zuru cloud os,вход зуру,вход zuru,zuru entrance,zuru login">
    <meta name="description" content="Entrance to the Zuru Cloud OS">
    <meta name="robots" content="index,nofollow">
    <meta name="generator" content="Zuru 1.0"/>
    <meta name="author" content="iLeonidze">
    <link rel="canonical" href="http://home.zuru.ml/"/>
    <link rel="shortlink" href="http://home.zuru.ml"/>
    <meta name="MobileOptimized" content="320">
    <meta name="HandheldFriendly" content="True">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=yes">
    <meta name="format-detection" content="address=yes">
    <meta name="distribution" content="global">
    <link rel="sitemap" type="application/xml" title="Sitemap" href="http://home.zuru.ml/sitemap.xml"/>
    <meta name="application-name" content="Zuru Cloud OS">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="apple-touch-icon" href="http://home.zuru.ml/images/specials/apple/touch-icon-60x60.png"/>
    <link rel="apple-touch-icon" sizes="76x76" href="http://home.zuru.ml/images/specials/apple/touch-icon-76x76.png"/>
    <link rel="apple-touch-icon" sizes="120x120" href="http://home.zuru.ml/images/specials/apple/touch-icon-120x120.png"/>
    <link rel="apple-touch-icon" sizes="152x152" href="http://home.zuru.ml/images/specials/apple/touch-icon-152x152.png"/>
    <link rel="apple-touch-startup-image" media="(device-width: 320px)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-320x460.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-640x920.png">
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-640x1096.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-768x1004.png">
    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-1024x748.png">
    <link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-1536x2008.png">
    <link rel="apple-touch-startup-image" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-2048x1496.png">
    <meta name="msapplication-tooltip" content="Zuru Cloud OS"/>
    <meta name="msapplication-config" content="IEconfig.xml" />
    <meta name="msapplication-TileColor" content="#FFFFFF"/>
    <meta name="msapplication-square70x70logo" content="./images/specials/windows8/square_70x70_logo.png"/>
    <meta name="msapplication-square150x150logo" content="./images/specials/windows8/square_150x150_logo.png"/>
    <meta name="msapplication-wide310x150logo" content="./images/specials/windows8/wide_310x150_logo.png"/>
    <meta name="msapplication-square310x310logo" content="./images/specials/windows8/square_310x310_logo.png"/>
    <meta name="msapplication-starturl" content="http://home.zuru.ml/"/>
    <meta name="msapplication-navbutton-color" content="#FFF"/>
    <meta name="msapplication-task" content="name=Start Zuru Cloud OS; action-uri=http://home.zuru.ml; icon-uri=http://home.zuru.ml/favicon.ico" />
    <meta name="msapplication-task" content="name=Go to official website; action-uri=http://zuru.ml; icon-uri=http://home.zuru.ml/favicon.ico" />
    <meta name="msapplication-task" content="name=Read out Twitter; action-uri=https://twitter.com/ZuruTeam; icon-uri=https://abs.twimg.com/favicons/favicon.ico" />
    <meta name="msapplication-task" content="name=Subscribe to our VK Page; action-uri=https://twitter.com/ZuruTeam; icon-uri=http://vk.com/images/faviconnew.ico" />
    <meta http-equiv="imagetoolbar" content="false"/>
    <meta name="dc.language" content="RU">
    <meta name="dc.source" content="http://home.zuru.ml/">
    <meta name="dc.title" content="Zuru">
    <meta name="dc.description" content="Cloud Operating System">
    <link rel="yandex-tableau-widget" href="./yandex-tableau-manifest.json" />


    Здесь дополнительные Meta-tags под Apple, Microsoft, Yandex Widgets и сервисы, понимающие тип dc.* + самое базовое SEO.
    Ответ написан
  • Что лучше, черный фон сайта или белый?

    iLeonidze
    @iLeonidze
    xbooster.ru
    Если исходить удобства в дальнейшем использовании, то конечно белый в топе. Большинство изображений, графики, рекламных блоков, готовых решений, наборов цветовых схем и т.п. заточены под белый фон ибо он самый читабельный. Конечно, Вы можете попробовать брутальный черный, но, поверьте, замучаетесь в дальнейшем :)
    Ответ написан